同一要素内に画像を置く際、大きい画像は親要素に合わせて幅100%表示し小さい画像はオリジナルサイズで配置する

2014年9月10日CSSテクニック

レスポンシブWebデザインをする際、複数の画像を親要素に合わせてまとめて幅100%にすることも多いかと思いますが、画像の幅が一括指定された要素の中に、親要素より小さい画像を置くと幅100%では荒れてしまうので、画像によってはオリジナルサイズで置きたい場合もあります。

画像ひとつひとつに対してmax-widthを設定していくのは面倒なので、このような場合は一括設定しているimgに対してmax-width: 100%とすると手間が省けます。これで親要素に合わせて大きい画像は100%表示され親要素の幅に満たないサイズの画像は本来の大きさで配置されます。

ブログの記事等でひとつのエリア（要素）内に、サイズが混在する画像を複数掲載する時などに有効です。

デモページ

HTML

<div id="contents">
	<p><img src="img01.jpg" width="1280" height="850"></p>
	<p><img src="img02.jpg" width="481" height="319"></p>
	<p><img src="img03.jpg" width="640" height="425"></p>
</div>

CSS

#contents {
	max-width: 1280px;
	min-width: 320px;
	width: 100%;
	background-color: #ffffff;
	margin: 0 auto;
	padding: 30px;
	box-sizing: border-box;
}
#contents p {
	margin-bottom: 30px;
}
#contents img {
	max-width: 100%;
	height: auto;
}

デモページ