0

コンテナに比例して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/

4

1 に答える 1

0

'max-width' CSSプロパティは、IMG要素の最大コンテンツ幅を設定します。つまり、幅を大きく設定しても、この要素の幅が広くなることはありません。要素のサイズを変更する場合は、「max-width」ではなく「width」プロパティを使用する必要があります。このプロパティは、パーセンテージ値も受け入れます(前述のPasserbyのように)。要素のパーセンテージ値は、含まれているブロックの幅を参照していることに注意してください。

于 2012-11-27T11:35:03.390 に答える