本文介绍了高宽比未知的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中的等高图像的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持编程学习网！
本站部分内容来源互联网,如果有图片或者内容侵犯您的权益请联系我们删除！