Question

两张图片，一张是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＆lt; 100 - 如果我将其设置为80/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...

Answer 1

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

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

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

Answer 2

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

img {

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? */

）

Answer 3

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

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

Answer 4

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

如何使并排图像的高度相等（CSS / HTML）？

4 个答案: