CSS入門

IEでCSSのmin-width、max-widthを実装する方法

2010/10/04 18:22Update

簡単なサンプルからIEでCSSのmin-width、max-widthを実装する方法について解説します。

										Webページに画像などを表示する際、
１）画像サイズは指定サイズ以内であれば、そのまま表示
２）指定するサイズ以上であれば、レイアウトを崩せないには、指定するサイズで表示
にしたい時があります。

こんな時、CSSのmin-width（要素の最小横幅）、max-width（要素の最大横幅）を利用したいでしょうが、残念ながら、IEではmin-width、max-widthをサポートしないようです。

例えば、
横幅400pxのを超えたmyimage.jpgを表示させる場合、

HTML

											<img class="img" src="myimage.jpg" />
										
CSS

											.img {
max-width:400px;
}
										
Firefoxなどのブラウザーで表示する場合、表示された画像はちゃんと400pxの範囲内（横幅）に収まれますが、IEでは、そのままのサイズで表示されます。

IE独自拡張「expression」を利用して、JavaScriptによるmax-widthやmin-widthを実装できます。
例：

											.img {
max-height:400px;

min-width: 100px;
max-width:400px;
width:expression(document.body.clientWidth < 100? "100px" : document.body.clientWidth > 400? "400px" : "auto");
}
										
.

CSS入門

IEでCSSのmin-width、max-widthを実装する方法

簡単なサンプルからIEでCSSのmin-width、max-widthを実装する方法について解説します。

有关作者

Syboos.jp編集長システム設計や開発、保守運営などを行ってます。オープンソース技術に興味があります。

Sponsored Link

Comments

CSS入門

IEでCSSのmin-width、max-widthを実装する方法

簡単なサンプルからIEでCSSのmin-width、max-widthを実装する方法について解説します。

有关作者 Syboos.jp編集長システム設計や開発、保守運営などを行ってます。オープンソース技術に興味があります。

Sponsored Link

Comments

有关作者

Syboos.jp編集長システム設計や開発、保守運営などを行ってます。オープンソース技術に興味があります。