如何使用内部图像按比例调整div的大小

Question

好，所以我有一个全屏背景图片，该图片通过Flash上​​传

flash {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1; }

它的大小调整得很完美，我在div的底部还有一个页脚，其中有5张图像。 我将所有图像对齐成一行，但是随着浏览器调整图像大小，图像会跳起来，而不是按比例调整大小。 非常感谢您的建议。 这是jsFiddle的链接http://jsfiddle.net/eglemei/LqBzY/

Answer 1

您的图片没有调整大小，因为您没有告诉他们调整大小。 比例调整大小不是默认行为。 如果图像以百分比形式给出width或height值，则图像将仅根据其包含的元素调整其大小。

指定height或width百分比后，图像将根据最近的父元素缩放，并带有一个明确设置的position属性（在您的情况下为'div＃footer'。如果您设置了百分比width ，则按只要您未在其他位置指定height ，图像就会保持其纵横比。

将图像的CSS更改为如下所示：

#sponsors img {
    margin-right: 3%; 
    width:16%;
}

您还需要从每个img标签中删除height="100px" ，否则img将使用该高度。

我已经相应地更新了您的jsFiddle： http : //jsfiddle.net/LqBzY/5/