親要素のサイズでトリミングして画像を重ねて表示する方法

親要素のサイズでトリミングして画像を重ねて表示する方法


親要素のサイズでトリミングした画像を重ねる方法を実現することができたので、書き残しておきます。




＊環境

  • macOS
  • CSS3
  • HTML5

＊実装

子要素を親要素のサイズでトリミングしてみました。
positionで画像を重ねることができますが、これだけだと親要素のサイズでトリミングすることができず、子要素を親要素のなかに収めて表示するか、はみ出して表示させるしかできません。
そこで、画像それぞれをdiv要素で囲み、同じサイズにした画像をpositionで重ねることで実現することができました。
< HTML >
<div class="main">
  <div class="content">
    <img class="main-image" src="https://cdn.pixabay.com/photo/2017/03/25/18/06/color-2174065_1280.png" alt="">
  </div>
  <div class="content">
    <img class="sub-image" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhFnxlAAxx1OdzwmvrVi5yl0St0xXiuvGoSmde_3fxQ12sc3k5OUj05lHWSHMfuZRyxZNNkQQtQXVK00CST7MpxKbQKEW_-1xnpeoor0tSx1KSoKWHL-EF24VmdPrP9mliccDYe6TGyrkxF/s450/animal_kirin.png" alt="">    
  </div>
</div>

キリンの位置はimg要素にpaddingを指定して調整することができます。
< CSS >
body {
  background: #fff;
  padding: 10px;
  font-family: Helvetica;
}

.main {
  position: relative;
}

.content {
  position: absolute;
  top: 0;
  left: 0;
  height: 300px;
  width: 500px;
  overflow: hidden;
  text-align: center;
}

.main-image {
  position: relative;
  width: 100%;
}

.sub-image {
  padding-top: 50px;
}

＊所感

実装は簡単ですが、思い付くまでに時間がかかりました。もっと良い方法があったら教えていただきたいです。