画像のみ全幅表示
<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;
}
}