高宽比未知的Flexbox中的等高图像

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

本文介绍了高宽比未知的Flexbox中的等高图像的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

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

这可以使用此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中的等高图像的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持编程学习网!

本文标题为:高宽比未知的Flexbox中的等高图像

基础教程推荐