html - 绝对定位的 img 没有拉伸(stretch)父级？

Question

链接演示:http://codepen.io/leoaivy/pen/adxJaR正如您在上面的链接中看到的，第一个方 block 的 child 没有拉伸(stretch)其父方 block ，而第二个方 block 的子方 block 进行了拉伸(stretch)。我认为这是因为图像本身有它的比例，所以我们不能通过绝对位置来改变它。对吗？

HTML:

<div class="parent">
  <img src="http://placehold.it/350x150" alt="" />
</div>

<div class="parent">
  <span></span>
</div>

CSS:

.parent {
  position: relative;
  display: inline-block;
  width: 150px;
  height: 150px;
  overflow: hidden;
}
.parent img, span {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}
.parent span {
  background: gold;
}

Answer 1

您可以通过添加 height:100%; 强制图像拉伸(stretch)宽度:100%;

.parent {
  position: relative;
  display: inline-block;
  width: 400px;
  height: 400px;
  overflow: hidden;
}
.parent img {
  width: 100%;
  height: 100%;
}
.parent img,
span {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}
.parent span {
  background: gold;
}

<div class="parent">
  <img src="http://placehold.it/350x150" alt="" />
</div>

<div class="parent">
  <span></span>
</div>