CSSで中の要素をはみ出すようにする

ブログの記事で使われているようなレイアウトです。上手く使うと記事にメリハリがでていいと思います。
2つ目の画像は左側はコンテンツ幅に合わせて、右側を画面の端まで引き伸ばしています。

サンプル

左右に指定したpx分はみ出すようにする

左右にはみ出させたい分のpxを指定します。
その左右合計分をcalcでwidthに追加します。

h2 {
  width: calc(100% + 120px);
  margin-left: -60px;
  margin-right: -60px;

}

画面幅いっぱいにはみ出すようにする

widthに100vwを指定します。
これで画面幅いっぱいになりますが、親要素を基準に100vwになってしまうので、 margin を計算して画面の中央に位置するようにします。

img {
  width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
}

左右どちらかを画面の端まではみ出させる

今回は右側でやってみてます。

img {
  width: calc(50% + 50vw);
}