レスポンシブデザイン対応画像

レスポンシブデザインに対応して、画面のサイズに合わせて画像が伸縮表示されるようにする

画像を伸縮させる

レスポンシブデザインに対応するためには、ページ（コンテンツ）に含まれる画像が、画面サイズに合わせて伸縮するようにする

高解像度ディスプレイで通常サイズの画像を表示させると、画像がぼやけて鮮明に写らない

高解像度対策として、使用する実際のサイズより大きな画像を用意して、それを縮小して表示させる

作業内容

画像を伸縮させて、常に親要素に収まるようにする
実際の画像のサイズより拡大しないようにする

"height: auto;" の役割

現在のブラウザは、画像は縦横比を維持して伸縮する

幅を縮めると高さも同じ比率で縮むようになっている

古いブラウザではそうならないものがあるので、"height: auto;" を追加している

max-widht プロパティ

max-width は、要素の最大幅を指定するプロパティ

親要素の幅が max-width プロパティで指定した幅より小さいときは、親要素に収まる幅に縮小して表示される

< img > に max-width: 100%; を適用すると、画像の実サイズ以上には拡大されない

親要素の幅が画像サイズ以下のときは、親要素の幅に合わせて縮小するようになる

画像の下に空くスペースを消す

画像を表示するときに、画像の下にわずかなスペースが空いてしまう

スペースを消す方法はいくつかあるが、テキストの垂直方向の行揃えを "bottom" に変更する方法を採用

もうひとつの方法は < img > タグに display プロパティを適用して、画像をブロックボックスで表示させる

コード

HTML

				<body class = "post">
					<img src ="post-headerimage.jpg" alt="post-hederimage" />
				⁢/body>

CSS

				/* レズポンシブイメージと画像したスペース防止 */
				img {
					max-width: 100%;
					height: auto;
					vertical-align: bottom;
				}	

				/* 画像の下に空くスペースを消す別の方法 */
				img {
					display: block;
					max-width: 100%;
					height: auto;
				}

テンプレートファイル

base.html

style.css