如何按比例调整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%;
}

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

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