responsive

by Ken Watanabe

HTML

<figure class="large">
  <img src="http://www.graphicthoughtfacility.com/media/uploads/images/Hult_001_WEB.jpg"/>
</figure>

<figure class="small">
  <img src="http://www.graphicthoughtfacility.com/media/uploads/images/Hult_002_WEB.jpg"/>
</figure>

<figure class="medium">
  <img src="http://www.graphicthoughtfacility.com/media/uploads/images/Hult_0016_WEB.jpg"/>
</figure>

CSS

figure, img, div, html, body { padding:0; margin:0; }
html { width:100%; height:100%;  }
figure { float:left; width:49%; border: 1px dotted gray; }
img { height:30em; width:auto; }
.large { height:100%; }
.medium { height:33.3333333333%; }
.small { height:66.6666666667%; }

@media screen and (min-width: 1750px) { img { height: 20%; } }
@media screen and (max-width: 1350px) { img { height: 15%; }  }
@media screen and (max-width: 900px) { img { height: 10%; }  }
@media screen and (max-width: 550px) { img { height: 5%; }  }