CSS

CSS – 要素からはみ出させる

親要素から子要素をはみ出させるにはpositionを使うのもいいのですがwidthを使ってはみ出させる方法もあります。簡単ではありますが、下記のコードのように使用すれば簡単にはみ出すことができます。

<!DOCTYPE html>
<html>
<head>
<title>Demo</title>
</head>
<body>
  <main>
    <article>
      <div class="wrap">
        <img src="https://images.unsplash.com/photo-1579353977828-2a4eab540b9a" alt="" />
      </div>
    </article>
  </main>
</body>
</html>
main{
  width:100%;
  height:100%;
}
article{
  width:300px;
  height:100%;
  margin-left:100px;
  background:gray;
  padding-top: 50px;
}
.wrap{
  width: 100%;
  background: black;
}
img{
  width:110%;
  margin: 0 -5%;
}

上記の例は画像をarticle要素からはみ出して表示するCSSになります。

親要素がどんなサイズであろうが子要素は親要素の100%+10%でサイズを維持するのでシンプルかなと思います。positionプロパティを使用するよりかはシンプルにコードをかけるので複雑ではない限りこちらのほうが無難かなと思いました。

子要素の高さについて

HTML構造にもよるのですが子要素のさらに子要素みたいになってくると画像がつぶれてしまったりする場合もあるかと思います。画像の高さを維持したい場合はobject-fitプロパティが有効かと思いますのでそちらを使ってそれなりに調整をするのもいいかもしれません。