flexbox中长宽比未知的等高图像

Question

I have images in a horizontal flex container. They should all be responsive, have the same height, while keeping their aspect ratio, and without being cropped:

This can be accomplished with this CodePen: https://codepen.io/sarus/pen/PJGPmy

The main problem with this approach is that you need to know the aspect ratios of all images in advance:

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

.pics_in_a_row {
  display: flex;
}

.img1 { flex: 1.3344; }
.img2 { flex: 1.3345; }
.img3 { flex: 0.7505; }

Is there a way to make this work with arbitrary images and unknown aspect ratios, with pure CSS (no JavaScript)?

Answer 1

You can use the css property object-fit .

img {
  object-fit: cover;
  height:50px;
  width:100px;
  }