css - 浮动 IMG 调整大小百分比

Question

我正在尝试与容器成比例地调整 img 的大小。IMG 向左浮动，周围有一个段落。

HTML：

<div>
<img src="picture.png">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla vestibulum venenatis      libero, eu egestas elit laoreet nec. Donec in nunc dictum nunc luctus eleifend sagittis id augue.</p>
</div>​

CSS：

div {
    width: 80%;
}
img {
    max-width: 100%;
    float: left;
    margin: 0 10px 10px 0;
}

​只有当左 div 边框碰到图像并且段落完全低于 img 时，图像才会调整大小。我想在 div 调整大小后立即调整 img 的大小。我知道我可以将 img 放在一个包装 div 中并给它一个百分比宽度，但如果可能的话，我想要一个更清洁的解决方案。

JSFiddle：http: //jsfiddle.net/989uX/

Answer 1

'max-width' CSS 属性设置 IMG 元素的最大内容宽度。换句话说，即使你设置了更大的宽度，这个元素也永远不会变宽。如果你想重新调整元素的大小，你应该使用'width'属性而不是'max-width'。该属性还接受百分比值（如上面提到的 Passerby）。请注意，元素的百分比值是指包含块的宽度。