我正在看: this code pen about equal responsive height images
我希望图像具有相同的高度，尽管它们的宽度/高度不同。
从下面的 CSS 中可以看出，使用 flexbox 和 flex 来获取图像，如下所示:
/* Important stuff for this demo. */
img {
width: 100%;
height: auto;
vertical-align: middle;
}
.pics_in_a_row {
display: flex;
}
.img1 { flex: 1.3344; } /* <-- how can I calculate this part? */
.img2 { flex: 1.3345; }
.img3 { flex: 0.7505; }
.img4 { flex: 1.5023; }
.img5 { flex: 0.75; }
如何计算 flex 的部分:数字。我猜这是宽高比？
最佳答案
宽高比是图像尺寸的 X/Y。
所以如果图像是 600 像素宽和 800 像素高，纵横比就是 600/800=0.75
当知道这一点时，您可以选择您引用的文章中提出的方法之一:
With the CSS methods, you do have a few options for specifying the aspect ratio:
- Work out the aspect ratio yourself and hard-code it into the CSS (as done in this demo)
- Use CSS's calc() to calculate the aspect ratio (e.g. flex: calc(600/800);)
- Use a preprocessor to calculate the aspect ratio at build time
关于html - 计算图像的纵横比以获得与 flexbox 相同的高度，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/51944581/