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

【问题标题】：how to proportionally resize div with an image inside如何用里面的图像按比例调整div的大小
【发布时间】：2013-03-16 05:46:20
【问题描述】：

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

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

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

【问题讨论】：

【解决方案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/

【讨论】：