Image Containers

by Matthew Day

HTML

<div class="container">
  <div class="nimg horz">
    <img src="https://placeimg.com/600/400/any">
  </div>

  <div class="nimg vert">
    <img src="https://placeimg.com/400/600/any">
  </div>
</div>

<div class="container">
  <div class="nimg vert">
    <img src="https://placeimg.com/600/400/any">
  </div>

  <div class="nimg horz">
    <img src="https://placeimg.com/400/600/any">
  </div>
</div>

CSS

.container {
  margin-bottom: 16px;
}

.nimg {
  background: thistle;
  display: inline-block;
  margin-right: 12px;
  overflow: hidden;
  vertical-align: middle;
}

.horz {
  height: 200px;
  width: 200px;
}

.horz img {
  height: auto;
  width: 100%;
}

.vert {
  height: 200px;
  width: 200px;
}

.vert img {
  height: 100%;
  width: auto;
}