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

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

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

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

发行日期：

我应该如何着手解决这个问题

这是我的一个非常糟糕的方法：
基本上我有一个div#img包装器，它包含img和覆盖。然后，覆盖和图像应与div\img包装保持相同大小

#img包装器{
框大小：边框框；
位置：相对位置；
左：35%；
最高：55%；
背景：黄色；
宽度：50%；
}
img{
边框：1px纯黑；
垂直对齐：中间对齐；
宽度：100%；
z指数：55；
不透明度：0.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;
}

#img包装器{
背景：黄色；
框大小：边框框；
宽度：50%；
}
img{
z指数：1；
宽度：100%；
不透明度：0.5；
垂直对齐：中间对齐；
边框：1px纯黑；
}

---

您可以尝试使用伪类。这里是一个例子

.img包装器{
位置：相对位置；
宽度：50%；
}
.img包装器：之后{
内容：''；
位置：绝对位置；
排名：0；
左：0；
宽度：100%；
身高：100%；
背景：rgba（0,0,0,0.5）；
}
.img包装器img{
宽度：100%；
}

你必须展示你的代码我的代码是错误的，不难意识到我的代码不起作用，我需要以不同的方式处理这个问题。你还认为我应该给你看吗？是的，请把密码贴出来。或者，甚至是一个简单的代码笔/jsfiddle来演示您所面临的问题。它有助于理解需求和您迄今为止所做的工作。也许您的方法没有错，可以很容易地修复，如果您不显示它，很难判断。抱歉，但您的解决方案不起作用，请查看我更新的小提琴。我忘了说我想把它放在一个占身体50%宽度的div里，我更新了代码。在图像包装上加上50%似乎可以实现这一点。好吧，看看我的提琴，当你把“img包装”放在一个占50%宽度和100%高度的div中时，它显然不起作用。我的意思是，你的解决方案是有效的，但出于某种原因，总是有一点覆盖“突出”。看一看：我制作了一个html文件，并在四种不同的浏览器中运行了代码。我看不出那个问题。