大きさが可変の子要素と全く同じ大きさの親要素を作りたい

Question

実現したいこと

大きさが可変のimage①に対して、
①より小さいimage②を%指定で重ねたい。

こちらが本当に実現したいことなので、
タイトルにそぐわない回答でも構いません。

試したこと

image①と親要素divを全く同じ大きさにできれば

position: absolute
position: relative

を用いて実現できると考えましたが、親要素のdivのheightがぴったりは合いませんでした。

<div class="relative">
  <img class="variable"> <!-- image① -->
  <img class="absolute"> <!-- image② -->
</div>

.relative {
  position: relative;
}
.variable {
  width: 100%;
  height: auto;
}
.absolute {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 30%;
  height: 30%;
}

Answer 1

imgがインライン要素であるため、relativeの画像に余白が生まれてしまっているものと思われます。
こちらが参考になるのではないでしょうか

【CSS】画像の下に謎の余白ができちゃう問題を解決する方法
http://ideahacker.net/2013/12/03/6983/

Comments

[orange377]

vertical-align: bottom;では若干ズレがありましたが、
display: block;でぴったり合いました！
ご回答ありがとうございました！