浮动IMG调整大小百分比

Question

我正在尝试按比例调整容器的大小。 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）。请注意，元素的百分比值是指包含块的宽度。