高宽比未知的Flexbox中的等高图像 [英] Equal height images in flexbox with unknown aspect ratio

问题描述

我在水平弹性容器中有图像。它们都应该是响应性的，具有相同的高度，同时保持其长宽比，并且不被裁剪：

这可以使用此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(不含Java脚本)？

css

可以使用推荐答案属性object-fit。

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

这篇关于高宽比未知的Flexbox中的等高图像的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！