Image-Resize

Resize image automatically.

by Rachel Gallen

HTML

<header>
  <div id="header_title">
    <h1>Title h1</h1>
    <h3>Title h3</h3>
  </div>
  <div id="header_photo">
    <img class="floatingimage wh100" src="http://www.planwallpaper.com/static/images/Awesome-Nature-Background.jpg" />
  </div>
</header>

CSS

header {
  width: 75%;
  height: auto;
  margin: 0 auto;
  padding: 0;
}

#header_title {
  font-weight: bolder;
  text-align: center;
  max-width: 80%;
}

#header_photo {
  /*display: none;*/
  margin: 0;
  padding: 0;
  max-width: 20%;
  float: right;
}

.floatingimage {
  position: relative;
  display: none;
}

.wh100 {
  width: 100px;
  height: 100px;
}

@media all and (max-width:480px) {
  #header_photo {
    margin-top: 10%!important;
  }
}

@media all and (max-width:1024px) {
  #header_title,
  #header_photo img {
    margin: 0;
    padding: 0;
    top: 2%;
    display: inline!important;
    vertical-align: middle!important;
  }
  #header_title {
    max-width: 80%;
    position: relative;
    float: left;
  }
  #header_photo {
    margin-top: 4%;
    max-width: 20%;
    position: relative;
    float: right;
  }
  #header_photo img {
    position: relative;
    max-width: 100%;
    height: auto;
  }
}