【CSS】画像を横幅いっぱいに表示するテクニック

こんな疑問にお答えします。

本記事は下記のブログを参考に作成しました。

参考：写真だけ画面横いっぱいに広げるCSSテクニック

画像を横幅いっぱいに表示するHTMLとCSSコード

HTML：

<div class="image"><img src="image.jpg"></div>

CSS：

.image {
	margin-right: calc(50% - 50vw);
	margin-left: calc(50% - 50vw);
}

.image img {
	display: block;
	width: 100%;
	height: auto;
}

普通の画像の貼り付け

親要素の幅を無視した画像

親要素の幅を無視して表示がされ、横幅を目一杯に画像が表示されていると思います。

LPなどの実装に役立ちそうです。

画像の外側にある余白の値を計算し、画像を計算した余白分広げるようにCSSを当てることで親要素の横幅を無視し全画面表示をさせています。

• 全画面の横幅：50vw
• 親要素の幅：50%

50vw – 50% で余白部分の幅を算出しています。

このテクニックを知っての気づき

なんとなくCSSはデザインのスキルやセンスだけが必須すきるのように感じていましたが、数学的なロジックを立てることで想像の幅を超えるような実装ができるのではないか？

と感じることができました。

デザイン的な感性が弱いという弱点があるので、Webデザインスキルのみならずデザインスキルを高めていきたいと感じたCSSテクニックでした。

まとめ