image - 如何用里面的图像按比例调整div的大小

Question

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

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

它完美地调整大小，我在底部还有一个页脚作为 div 和里面的 5 个图像。我将所有图像排成一行，但是当浏览器调整图像大小时，图像会向上跳跃，而不是按比例调整大小。非常感谢您的建议。这是 jsFiddle http://jsfiddle.net/eglemei/LqBzY/的链接

score 0 · Accepted Answer

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

一旦您指定了一个百分比height或'不要在别处指定，图像将保持它们的纵横比。widthpositionwidthheight

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

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

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

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

1 回答 1