画像をレスポンシブサイトに対応させる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;
}

コメント投稿またはTwitterで返信

コメントは、以下の項目(*は必須項目)を入力し「コメントを送信」ボタンから送信お願いします。メールアドレスは公開されることはありません。
Twitterで返信する場合はこちらから。

また、コメントは承認制となります。