flexbox中長寬比未知的等高圖像

Question

我在水平 flex 容器中有圖像。 它們都應該是響應式的，具有相同的高度，同時保持它們的縱橫比，並且沒有被裁剪：

這可以通過這個 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;
  }