NAKAZI LAB.(ナカジラボ)

Webサイト制作を円滑にすることを目的とした、cssやJavaScript(jQuery)の小技備忘録サイトです。

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

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

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

レスポンシブ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;
}

デモページ

  • ̃Gg[͂ĂȃubN}[Nɒlj

関連記事

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

更新情報をチェックする

rss feedly twitter facebook

今週の人気記事TOP10

サイト内検索

中の人

nakazi

Web関係のお仕事をしてます。効率化が大好きです。当サイトの更新情報やWeb制作に関する事を@nakazilabでつぶやいています。

連絡先

nakazilab[atmark]gmail.com