【画像によく利用するCSS】レスポンシブ、横幅・高さの上限、中央揃えなど

今回は画像(img要素)に対してよく利用するCSSのまとめとなります。

画像(img要素)に対してよく利用する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では、画像をblock要素として左右のmarginをautoにすることで、画像を中央揃えにします。

img {
	display: block;
	margin: 0 auto;
}

上記のCSSを組み合わせた例

以下の画像に対するCSSは、次の3つの条件を満たす例となります。

  • 画像をレスポンシブに対応(画像の横幅の最大サイズが親ボックスの横幅)
  • 画像の高さの最大サイズが200px
  • 画像を中央揃え
img {
	 /* 画像をレスポンシブに対応 */
	max-width: 100%; 
	height: auto;

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

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

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

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

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