HTML
<div class=”width-contents”>
<div class=”full-width”>
<p>ここの内容を画面幅100%にします。</p>
</div>
<div class=”full-width”>
<img src=”./image.jpg”>
</div>
<img src=”./image.jpg” class=”full-img”>
</div>
CSS
body {
overflow-x: hidden;
}
img {
width: 100%;
height: auto;
}
.width-contents {
max-width: 1000px;
margin: auto;
}
.full-width {
width: 100vw;
margin-left: calc(-50vw + 50%);
}
.full-img {
width: 100vw;
height: auto;
margin-left: calc(-50vw + 50%);
}
サンプルページ
.width-contentsの左右の余白分だけネガティブマージンを使って.full-widthを広げています。
横スクロールバーが表示されることがあるので、1~3行目でbodyにoverflow-x: hidden を指定しています。
※vwがスクロールバーを含まない幅のため、厳密には画面幅より少しだけ大きくなってしまいます。使用するデザインなどによっては注意が必要です。