计算图像的纵横比以使用flexbox获得相等的高度

Question

我正在看： 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：数字的部分。我猜这是长宽比吗？

Answer 1

我自己也在为此苦苦挣扎。您可以通过划分其宽度和高度来获得图像比例。如果您不使用 JavaScript，只需打开计算器并将图像宽度除以高度即可。如果您使用 JavaScript，那么要获得 flex 值，您需要除以图像宽度/高度。像这样：

const imageRatio = img.naturalWidth / img.naturalHeight;

获取值时，您可以使用 naturalWidth 和 naturalHeight 值来返回图像的原始大小。我一开始只使用了高度和宽度，但它来自浏览器，在某些情况下（加载图像等）可能会返回不正确的值。

https://developer.mozilla.org/en-US/docs/Web/API/HTMLImageElement/naturalWidth

我最终做的是使用 JavaScript 而不是 flex 来计算列宽，因为如果列内有文本，它就不起作用。然后数学变得更加复杂。您必须获得所有图像的比例，将它们相加，然后得到总比例。然后将图像比例除以这个完整比例以获得百分比。

这是一些伪代码：

const getFullRatio = (images) => images.reduce((acc, curr) => (curr.naturalWidth / curr.naturalHeight) + acc, 0);

const containerWidth = 740;
const columnAmount = images.length;
const columnMargin = 15;
const marginPercentageToAdd = ((columnAmount * columnMargin) / containerWidth) + 1;
const fullRatio = getFullRatio(images);
const fullRatioWithMargins = fullRatio * marginPercentageToAdd;

 images.forEach((img) => {
    const imageRatio = img.naturalWidth / img.naturalHeight;
    const columnRatio = (imageRatio / fullRatioWithMargins) * 100;

    const imageParentDiv = img.closest('.COLUMNCLASS');
    imageParentDiv.style.width = `${columnRatio}%`;
    const image = img;
    image.style.width = '100%';
});

Answer 2

宽高比是图像尺寸的X / Y。

因此，如果图像的宽度为600像素，高度为800像素，则长宽比将为600/800 = 0.75

知道这一点后，您可以选择所引用文章中提出的一种方法：

  

使用CSS方法，您确实可以使用一些选项来指定   宽高比：

     

  
• 自己计算宽高比并将其硬编码到CSS中（如本演示中所述）
  
• 使用CSS的calc（）计算宽高比（例如flex：calc（600/800）;）
  
• 在构建时使用预处理器计算长宽比