コンテナ幅を超える画像の配置方法です。
1行のCSSで可能です。
いちど親要素のcontainerから出してコーディングすることもできますが、面倒なのでCSSを1行追加して実装します。
CSS
// 右にはみ出す
margin-right: calc(50% - 50vw);
// 左にはみ出す
margin-left: calc(50% - 50vw);
// 左右はみ出す
margin: 0 calc(50% - 50vw);
これだけです。
サンプルです
CodePenのサンプルです。
See the Pen コンテナ幅を超える画像 by しんぺー@Webエンジニア (@MICROBE1985) on CodePen.