I'm trying to determine if `object-fit: contain;` can work with multiple images when supplying only a width percentage. I want all `<img>`'s to be the same viewable height respective to aspect ratio and thought that giving a `max-width: 5%;` would force an implied height. I'm willing to use a `flexbox`, although when I tried using that I ended up with the same problem. In the below, the second `li` picture ("curry\_2.jpg") shrinks, but not correctly.

```css
  div.imgbox {
  width: 100%
}

ul {
  list-style-type: none;
  padding: 0;
  margin: 0;
}

ul li {
  float: left;
  max-width: 5%;
  height: 100%;
}

ul li img {
  width: 100%;
  height: 100%;
  object-fit: contain;
```

```html
<div class="imgbox">
  <ul class="imgs">
    <li><img src="https://web.archive.org/web/20010806195135im_/http://rubberburner.com:80/curry_1.jpg"></li>
    <li><img src="https://web.archive.org/web/20010806195628im_/http://rubberburner.com:80/curry_2.jpg"></li>
    <!-- The above image, "curry_2.jpg" shrinks but not correctly -->
    <li><img src="https://web.archive.org/web/20010806194159im_/http://rubberburner.com:80/all_curry1.jpg"></li>
  </ul>
</div>
```

**EDIT**

I'm not sure why, but using `height: vw` works the way I want, by keeping the row solid. `height: vh` also works, but that allows the images to tumble on page resize thus appearing as multiple rows.

```css
ul {
 list-style-type: none;
 padding: 0;
 margin: 0;
}
ul li {
 float: left;
 height: 10vw; /* height using vW... not vH? */
}
.imgs img {
 max-height: 100%;
 object-fit: contain;
}
```

```html
 <div class="imgbox">
  <ul class="imgs">
   <li><img src="https://web.archive.org/web/20010806195135im_/http://rubberburner.com:80/curry_1.jpg"></li>
   <li><img src="https://web.archive.org/web/20010806195628im_/http://rubberburner.com:80/curry_2.jpg"></li>
   <!-- The above image, "curry_2.jpg" shrinks -->
   <li><img src="https://web.archive.org/web/20010806194159im_/http://rubberburner.com:80/all_curry1.jpg"></li>
  </ul>
 </div>
```