.containerを超えるコーディング

  • 投稿日
  • 更新日
  • 著者 しんぺー
  • カテゴリー Code
  • カテゴリー CSS
  • カテゴリー HTML

コンテナ幅を超える画像の配置方法です。

1行のCSSで可能です。
いちど親要素のcontainerから出してコーディングすることもできますが、面倒なのでCSSを1行追加して実装します。

CSS

// 右にはみ出す
margin-right: calc(50% - 50vw);

// 左にはみ出す
margin-left: calc(50% - 50vw);

// 左右はみ出す
margin: 0 calc(50% - 50vw);

これだけです。

要素の幅（100%）から、画面幅（100vw）を引いて上げると、余白部分が取得できます。
左右で半分に計算したいので、calc(50% - 50vw)となっています。

また.containerのmin-width: 1000px;など幅を指定しているかと思います。
画面サイズがそのサイズになったら、.containerのpadding: 0 20px;などに合わせて、下記のようにします。

.container {
  width: 1000px;
  padding: 0 20px;

  margin-right: calc(50% - 50vw);
  margin-left: calc(50% - 50vw);

  @media only screen and (max-width: 1000px) {
    margin: 0 20px;
  }
}

サンプルです

CodePenのサンプルです。

See the Pen コンテナ幅を超える画像 by しんぺー＠Webエンジニア (@MICROBE1985) on CodePen.