yukeka
4/13/2020 - 8:23 AM

画像のみ全幅表示

画像のみ全幅表示

画像のみ全幅表示

A Pen by yukeka on CodePen.

License.

<div class="container">
  <p>この親要素の横幅はPC画面で800px、スマホ画面で80%です。テキスト部分は親要素と同じ横幅なのですが、写真は全画面表示になっております。</p>
  <p>写真も本来はPC画面で800px、スマホ画面で80%表示されるはずなのですが、calc()を使うことで全画面表示にすることが出来ます。写真を印象的に表現したいページに使えますね。</p>
  <div class="image">
    <img src="https://cdn.pixabay.com/photo/2020/04/08/08/56/squirrel-5016507_640.jpg">
  </div>
  <p>これは、テキスト部分の外側にある余白の値を計算して、写真をその分左右に広げることにより全画面表示をしてます。</p>
  <p>文章の横半分の値を『50%』で、全画面の横半分の値を『50vw』で出すことができるので、それらを使って文章横にある余白の値をcalc()で計算します。</p>
  <div class="image">
    <img src="https://cdn.pixabay.com/photo/2020/04/08/08/56/squirrel-5016507_640.jpg">
  </div>
  <p>計算式は、calc((50vw - 50%)* -1)</p>
  <p>『-1』をかけているのはネガティブマージンを値を出して、その値で写真を左右に広げるから。仮にテキスト部分の外側にある余白が左右それぞれ200pxだとしたら、marginの左右の値を『-200px』にすることで画像部分の要素が左右に200px分ずつ広がります。</p>
  <p>そのため『-1』をかけてネガティブマージンにしてます。</p>
  <p>それを簡略化させるため、実際の記述は『calc(50% - 50vw)』にして-1を掛けなくてもネガティブマージンの値を求められるようにします。</p>
  <div class="image">
    <img src="https://cdn.pixabay.com/photo/2020/04/08/08/56/squirrel-5016507_640.jpg">
  </div>
  <p>この部分的な全画面表示は写真や画像だけではなく、さまざまな要素に適用することができます。</p>
</div>
.container {
   margin: 0 auto;
   width: 800px;
}

.container p {
   margin-bottom: 50px;
   font-size: 2rem;
}

.container .image {
   margin: 0 calc(50% - 50vw) 75px;
}

.container .image img {
   display: block;
   width: 100%;
   height: 300px;
   object-fit: cover;
}

@media (max-width: 800px){
   .container {
      width: 80vw;
   }

   .container .image img {
   height: 150px;
   }
}