max-width | raining

HTMLで画像を表示する場合、今まではimgタグに「width」、「height」を指定してました。

画像サイズが決まっているものに関しては問題ないのですが、
サイズが決まっていない画像を表示する場合は「width」・「height」を
指定していると画像が元のサイズから拡大や縮小してしまい、
きれいに表示されないことがあります。

CSSの「max-width」、「max-height」を使用すると画像の幅・高さの
最大値を指定することができるので拡大・縮小せずに画像を
きれいに表示することができます。

下記に「max-width」、「max-height」の使用方法をメモします。

■ max-width

幅の最大値を指定します。

max-width: 100px;

■ max-height

高さの最大値を指定します。

max-height: 100px;

■ 使用方法

【CSS】

div#hoge img {
	max-width: 300px;
	max-height: 300px;
}

【HTML】

<div id="hoge">
    <img src="/img/hoge.jpg" />
</div>

上記の方法を使用すると「max-width」、「max-height」で指定したサイズより小さい場合は
指定されません。
最大値に設定したサイズを超えた場合、指定したサイズに縮小され表示されます。

また、「min-width」、「min-height」を使用すれば、幅・高さの最小値を指定することができます。

raining