保持响应图像覆盖的大小与图像相同。

Question

我有一个绝对定位的图像。图像的覆盖层应该始终与图像的大小相同。

请注意，图像是响应的。也就是说，如果用户调整窗口大小，图像将增加长度和高度。覆盖必须相应地做出反应。

我面临的问题是，如果用户增加浏览器的宽度，覆盖层会根据图像的高度增加，但是，为了不产生干扰图像，图像的高度也会增加。尽管用户只增加了浏览器的宽度，但是图像的增加造成了覆盖层和图像之间的大小差异。

发行全球综合框架：https://gyazo.com/e90fd418df20a622712b73422d1022b8

我该如何解决这个问题呢？

这是我的一个非常糟糕的方法：

基本上，我有一个包含img和覆盖的div#img-wrapper。然后，div#img-wrapper__.的覆盖和图像应该保持相同的大小。

​

#img-wrapper {
    box-sizing: border-box;
    position: relative;
    left: 35%;
    top: 55%;
    background: yellow;
    width: 50%;
}

img {
   border: 1px solid black;
    vertical-align: middle;
    width: 100%;
    z-index: 55;
    opacity: 0.2;
}

<div style="width: 50%; height: 500px; border: 1px solid black;">
  <div id="img-wrapper">
   <img src="https://s3.amazonaws.com/cdn-origin-etr.akc.org/wp-content/uploads/2017/11/12225358/Pug-On-White-01.jpg" alt="">
</div>
  
</div>

​

Answer 1

​

#img-wrapper {
  background: yellow;
  box-sizing:border-box;
  width: 50%;
}

img {
  z-index: 1;
  width: 100%;
  opacity: 0.5;
  vertical-align: middle;
  border: 1px solid black;
}

<div id="img-wrapper"><img src="https://s3.amazonaws.com/cdn-origin-etr.akc.org/wp-content/uploads/2017/11/12225358/Pug-On-White-01.jpg" alt=""></div>

​

我想这就是你要找的。

Answer 2

你能试试这个吗？我只是稍微改变了你的CSS。因此，您可以将包装器的高度设置为auto。然后取下要设置为相对于包装器的图像的绝对位置。然后定位绝对覆盖顶部和左侧0，并给出100%的高度来填充父包装元素。

#img-wrapper {
    position: relative;
    width: 50%;
    background: yellow;
    height: auto;
}
img {
    border: 1px solid black;
    z-index: 1;
    width: 100%;
    opacity: 0.5;
}
#overlay {
    position: absolute;
    background: red;
    opacity: 0.1;
    z-index: 5;
    height: 100%;
    width: 100%;
    top: 0;
    left: 0;
}

Answer 3

你可以尝试使用伪类。这里的例子

​

.img-wrapper {
  position: relative;
  width: 50%;
}

.img-wrapper:after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0,0,0,0.5);

}

.img-wrapper img {
  width: 100%;
}

<div class="img-wrapper">
  <img src="http://via.placeholder.com/400x300" alt="">
</div>

​