Handling different image ratios

by Matthew Day

HTML

<div class="wrapper">
  <ul>
    <li>
      <div class="nimg">
        <img class="pwidth" src="http://placekitten.com/g/200/300" />
      </div>
    </li>
    <li>
      <div class="nimg">
        <img class="pheight"src="http://placekitten.com/g/300/200" />
      </div>
    </li>
    <li>
      <div class="nimg">
        <img class="pwidth" src="http://placekitten.com/g/400/500" />
      </div>
    </li>
    <li>
      <div class="nimg">
        <img class="pwidth" src="http://placekitten.com/g/400/700" />
      </div>
    </li>
  </ul>
</div>

CSS

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

ul {
  display: flex;
  justify-content: space-between;
  list-style: none;
}

.pheight {
  height: 100%;
  width: auto;
}

.pwidth {
  height: auto;
  width: 100%;
}

.wrapper {
  margin: 0 auto;
  width: 90%;
}

.nimg {
  border: 1px solid thistle;
  height: 100px;
  overflow: hidden;
  width: 100px;
}