CSSでブラウザのウィンドウサイズに合わせて画像を拡大・縮小する方法

ブラウザのウィンドウサイズに合わせて画像を拡大・縮小する方法です。ここではCSSを使った方法を紹介します。 動作は主要ブラウザ（IE/FF/Chrome/Safari/Opera）の現時点での最新版で確認しています。 動作確認は以下のサンプルをご利用ください。 サンプル １．ウィンドウの高さに合わせて画像を拡大・縮小する ウィンドウの高さにあわせて画像を拡大・縮小するには、次のようにします。 HTML <div id="box"> <img src="画像のURL" alt="coffee" /> </div> CSS #box { height: 20%; } #box img { height: 100%; } img要素を括ったdiv要素にheightプロパティを設定し、画像の高さを%で指定します。また、img要素に「height:100%」を設定します。 ２．ウィンドウの幅に合わせ

[sugarshin]

undefined

[site159]

パーセントと min height min width