具有未知纵横比的flexbox中的等高图像

Question

我在水平伸缩容器中有图像。它们都应该是响应式的，具有相同的高度，同时保持它们的纵横比，并且不会被裁剪：

这可以通过这个 CodePen 完成：https://codepen.io/sarus/pen/PJGPmy

这种方法的主要问题是你需要提前知道所有图像的纵横比：

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

.pics_in_a_row {
  display: flex;
}

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

有没有办法使用纯 CSS（无 JavaScript）来处理任意图像和未知宽高比？

Answer 1

你可以使用css属性object-fit。

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