html - 强制响应式 <img> 扩展到父级 <div>

Question

为清楚起见，请参阅代码笔:http://codepen.io/anon/pen/QyaLPb 我想创建一个带有叠加层的图像。叠加层应与图像大小相同，但是由于 .imagecontainer 和 img 的 width: 100% 和 height: auto，它们的高度并不完全相同。现在叠加层的高度比 img 高几个像素。您可以看到 .imagecontainer 的高度比内部的 img 高(底部显示红色背景)。我需要 imagecontainer 和 img 响应，所以设置固定高度并不是一个真正的选择。我该如何解决这个问题？

HTML:

<div class="wrapper">
    <div class="imagecontainer">
        <img src="http://www.kleinewolf.nl/uploads/fancybox/8f5b7a59-32b7-4582-868b- e2ff1f3e41a2/2835832130.jpg">
        <div class="overlay">
        </div>
    </div>
</div>

CSS:

.wrapper{
  width: 400px;
  padding: 40px;
}

.imagecontainer {
  width: 100%;
  height: auto;
  overflow: hidden;
  background: red;
  position: relative;
}

.imagecontainer img {
  width: 100%;
  height: auto;
}

.overlay {
  position: absolute;
  top:0;
  left:0;
  width: 100%;
  height: 100%;
  background:rgba(0,0,0,0.8);
  display:none;  
}

.imagecontainer:hover .overlay {
  display:block;
}

Answer 1

如果你说的是图片下方的红色边框。

添加到您的 .imagecontainer img:display: block。那应该可以解决问题...