如何使并排图像等高（CSS/HTML）？答案

【问题标题】：How do I make side-by-side images equal height (CSS/HTML)?如何使并排图像等高（CSS/HTML）？
【发布时间】：2010-11-13 07:32:40
【问题描述】：

两张图片，一张是 300x400 像素（高 x 宽），另一张是 500x600。如何让它们并排显示，缩放以使它们在屏幕上具有相同的高度，填充页面（或容器/div）的整个宽度，而不改变任一图像的纵横比？

我想要一种 HTML/CSS 方式来做到这一点——如果可能的话，它也适用于 2 张以上的图像。目前我手动计算每个图像的宽度（下面的数学）。

编辑：
我正在尝试做的一个例子：

<img src="http://stackoverflow.com/content/img/so/logo.png"
     width="79%" style="float:left" border=1 />
<img src="http://stackoverflow.com/content/img/so/vote-favorite-off.png"
     width="20%" border=1 />

使用下面的公式（或反复试验）得出 79/20 拆分。请注意 79 + 20

ah1 = 300 // actual height of image 1
aw1 = 400 // actual width of image 1
ah2 = 500 // actual height of image 2
aw2 = 600 // actual width of image 2

// need to calculate these:
dw1 // display width of image 1, expressed as percent
dw2 // display width of image 2, expressed as percent
dw1 + dw2 == 100%

s1 = dw1 / aw1 // scale of image 1 (how much it has been shrunk)
s2 = dw2 / aw2

dh1 = ah1 * s1 // display height of image 1 = its actual height * its scale factor
dh2 = ah2 * s2

// need to solve this equality to get equal display heights:
            dh1 == dh2
       s1 * ah1 == s2 * ah2
dw1 / aw1 * ah1 == dw2 / aw2 * ah2
dw1 / aw1 * ah1 == (1 - dw1) / aw2 * ah2
dw1 * aw2 * ah1 == (1 - dw1) * aw1 * ah2
dw1 * aw2 * ah1 == aw1 * ah2 - aw1 * ah2 * dw1
dw1 * aw2 * ah1 + aw1 * ah2 * dw1 == aw1 * ah2
dw1 * (aw2 * ah1 + aw1 * ah2) == aw1 * ah2
dw1 == aw1 * ah2 / (aw2 * ah1 + aw1 * ah2)
    == 400 * 500 / (600 * 300 + 400 * 500)
    == 20 / (18 + 20)
    == 20 / 38
    == 52.63% // which ends up as style="width:53%" which isn't quite right...

【问题讨论】：

标签： html css layout image

【解决方案1】：

为什么不简单地设置图像的 HEIGHT 属性值，而不归因于宽度？

所以：<img height="300" src="path/to/image.png" />

您也可以通过 CSS 实现这一点，原理相同：您设置高度，而不是宽度。重新缩放将成比例...

【讨论】：

如果我设置了高度，我将如何让两个图像占据整个屏幕的宽度？我仍然需要手动计算正确的高度，以便两个图像填满整个宽度。
所以这意味着我们必须独立计算每个图像的宽度/高度值。输出画廊 html 标记时，您只能在客户端（javascript）或服务器端（例如通过 php）执行此操作。你的选择是什么？

【解决方案2】：

如果您不需要将它们缩放到相同大小（以显示整个图像），您可以使用 CSS clip 属性

图片{

clip: rect(0 300px 300px 0;
position: absolute; /* the problem with using clip is that the element has to be absolutely positioned, which isn't always as awkward as it seems, but any content around it will need to be cleared somehow, perhaps with a top-margin? */

)

【讨论】：

我第一次听说“剪辑”。听起来它会裁剪我的图像。我希望以原始纵横比显示整个图像。
它确实可以裁剪（或“剪辑”）图像；）是的，我不确定你是否想要裁剪它们，但由于几乎没有人使用剪辑我以为我会指出它是一个有用的属性。我会警告你，使用 CSS/(X)HTML 缩放图像是浏览器密集型的，不一定是显示图像的最讨人喜欢的方式。那样并不更糟，只是方法的成本。
[cont]...也使用“剪辑”意味着您不必担心原始尺寸（除非您想检查最小图像的尺寸并将其保留为剪辑尺寸）。而使用 CSS/XHTML 从外观上看需要一些复杂的计算。除非您随意并坚持使用一组特定的尺寸。

【解决方案3】：

设置高度应该可以。请记住，您也可以使用相对值，例如百分比。

<img src="myimage.jpg" height="100%" />

【讨论】：

这种方法有效，但我必须调整或计算正确的高度才能使用，以便两个图像的宽度填满容器的整个宽度。

【解决方案4】：

<img id="one" class="equal" style="width:50%;"/>
<img id="two" class="equal" style="width:50%;"/>

【讨论】：

这使它们的宽度相等，而不是高度。