Fluid Imageにしたい時のCSSの記述方法

SONY DSC

サイト上で画像を表示する際に、ウィンドウサイズに合わせて画像を可変にしたい時があります。
よく見返しちゃうので備忘録。

 

作ったデモサイト

こんな感じです。
 

html

こちらは普通にimgタグで画像を指定。

<img src="images/chaouen.jpg" height="852" width="1280" alt="photo">

css

cssは以下のように記載します。

		img{
			max-width: 100%;
			height: auto;
		}

 

注意点

IE8では今回の書き方では横幅しか縮小されず、縦幅が縮小されないようです。
その場合は、IE8の場合にはwidth:autoを指定すれば解決します。

width:auto; /* for ie8 */

 

また、IE7以下ではmax-widthをはじめ、min-widthやmin-height等のプロパティには対応していないようなので、cssハックで対応するか、拡大縮小時のシャギーを解消するJavascriptライブラリを利用することが多いらしいです。

imgSizer.js

 

以上