固定幅の親要素の子要素を横幅100%にするCSS

子要素をブラウザ横幅100%表示するCSSです。
レスポンシブデザインでコンテンツが固定幅、画像は横幅100%という場面で
多く使うためmixinで登録しておくと便利です。

#デモ

See the Pen OJVLZLv by harumi-sato (@harumi-sato) on CodePen.

#コード

横幅をブラウザ幅に設定=100vw
左右のmarginを-50vwで計算している。
（子の数値に影響されずスマートな解決方法ですね！）

SCSS

//@include fullsize
@mixin fullsize {
  width: 100vw;
  position: relative;
  left: 50%;
  right: 50%;
  margin-left: -50vw;
  margin-right: -50vw;
}

.contents{
  width:600px; //固定幅
  margin:0 auto;
  background:lightgreen;
}

.child{
  @include fullsize;
  img{
    width:100%;
    height:auto;
  }
}

HTML

<div class="contents">
  <p>テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。</p>
  <div class="child"><img src="//via.placeholder.com/350x150" alt=""></div>
  <p>テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。</p>
</div>

#まとめ

-50vwでマイナスmarginを設定するため、
子要素の幅に影響されず横幅100%に指定できる。