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

Question

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

请注意，图像是响应式的。 这意味着，如果用户调整窗口大小，则图像的长度和/或高度将增加。 覆盖层必须做出相应的反应。

我面临的问题是，例如，如果用户增加浏览器的宽度，则覆盖层会根据图像的高度增加，但是，图像的高度也会增加，从而不会产生受干扰的图片。 尽管用户仅增加了浏览器的宽度，但是图像的增加在覆盖层和图像之间产生了大小差异。

问题的Gif： 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。 因此，您可以将包装器的高度设置为自动。 然后取下要设置为相对于包装纸的图像的绝对位置。 然后将绝对叠加层的顶部和左侧位置为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>