写真だけ画面いっぱいに配置

HTML

<div class="container">
  <div class="contents">
    <div class="image"><img src="picture.jpg" alt="スマホを見ながらPCを操作する写真"></div>
    <p>テキストの横幅は固定、画像だけを左右画面いっぱいに広げるレイアウトを使う機会は少なくないです。これを実装する際はマークアップで対処していましたが、これからはCSSで実装できます。一括指定できるのでかなり便利ですよ。</p>
  </div>
</div>

CSS

.contents {
  margin-right: auto;
  margin-left: auto;
  width: 600px;
}

.contents p {
  margin-bottom: 50px;
}

.image {
  margin-right: calc(50% - 50vw);
  margin-left: calc(50% - 50vw);
  margin-bottom: 50px;
}

.image img {
  display: block;
  width: 100%;
  height: auto;
}

.container {
  overflow-x: hidden;
}