浮动 IMG 调整大小百分比答案

【问题标题】：Floating IMG resize percentage浮动 IMG 调整大小百分比
【发布时间】：2012-11-27 19:35:03
【问题描述】：

我正在尝试使用容器按比例调整 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/

【问题讨论】：

IMG 本身可以使用百分比宽度。你能用包装器DIV 证明你到底想要什么吗？

标签： css image-resizing

【解决方案1】：

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

【讨论】：

谢谢，这正是我想要的：