Question

为清楚起见，请参阅codepen：http://codepen.io/anon/pen/QyaLPb 我想创建一个带叠加层的图像。叠加层应与图像大小相同，但由于.imagecontainer和img的宽度：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

http://codepen.io/anon/pen/QyaWNE

为您的容器div添加了line-height:0;。父div包含的图像通常倾向于从其他元素中获取边距，line-height和font-size通常是个问题。祝你好运！

Answer 2

如果您说的是图像下方的红色边框。

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

强制响应<img/>以扩展为父<div>

2 个答案: