画像をレスポンシブサイトに対応させるCSSの例｜横幅・高さの上限を指定

今回は、CSSで画像（img要素）を横幅・高さを可変させて、レスポンシブサイトに対応させる例となります。

画像（img要素）の横幅・高さを可変とするCSSの例

以下は、それぞれの条件によりCSSで画像を可変させる例となります。

横幅の上限を親ボックスの横幅とする例

以下のCSSでは、画像の「最大の横幅」が親ボックスの横幅となり、「高さ」は横幅に合わせて自動でサイズを調節します。

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

横幅の上限を指定する例

以下のCSSでは、画像の「最大の横幅」がmax-widthの値となり、「高さ」は横幅に合わせて自動でサイズを調節します。

img {
	max-width: 500px;
	height: auto;
}

高さの上限を指定する例

以下のCSSでは、画像の「最大の高さ」がmax-heightの値となり、「横幅」は高さに合わせて自動でサイズを調節します。

img {	
	max-height: 200px;
	width: auto;
}

画像をレスポンシブサイトに対応させるCSSの例

以下は、上記のCSSを組み合わせて、画像をレスポンシブサイトに対応させるCSSの例となります。

img {
	 /* 画像の横幅の上限を親ボックスの横幅に指定 */
	max-width: 100%; 
	height: auto;

	 /* 画像の高さの上限を指定 */
	max-height: 200px; 
	width: auto;

	 /* 画像を中央揃え */
	display: block; 
	margin: 0 auto;
}