保持响应式图像覆盖与图像相同的大小答案

【问题标题】：Keep responsive image overlay the same size as image保持响应式图像覆盖与图像相同的大小
【发布时间】：2019-08-05 18:39:53
【问题描述】：

我有一个绝对定位的图像。图像具有应始终与图像大小相同的叠加层。

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

我面临的问题是，例如，如果用户增加浏览器的宽度，则叠加层会根据图像增加高度，但是，图像也会增加高度，以免创建混乱的图片。尽管用户只增加了浏览器的宽度，但图像的增加会在叠加层和图像之间产生大小差异。

问题的 Gif：https://gyazo.com/e90fd418df20a622712b73422d1022b8

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

这是我的一个非常糟糕的方法：
基本上我有一个 div#img-wrapper 包含 img 和覆盖。 overlay 和 image 应该与 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>

【问题讨论】：

你必须出示你的代码
我的代码错了，不难意识到我的代码不起作用，我需要以不同的方式解决这个问题。你还认为我应该展示它吗？
是的，请发布代码。或者，甚至是一个简单的 codepen/jsfiddle 来演示您面临的问题。它有助于了解需求以及您迄今为止所做的工作。
也许你的做法没有错，很容易改正，不表现出来就不好说了。

标签： javascript html css

【解决方案1】：

你可以试试这个吗？我只是稍微改变了你的 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;
}

【讨论】：

我的意思是，您的解决方案有效，但由于某种原因，总有一点“突出”的覆盖。看一看：gyazo.com/90d2868a5ce64bfd5263a38832836c57
我制作了一个 html 文件并在四种不同的浏览器中运行代码。我没有看到那个问题。 screencast.com/t/TTVLPzVuFB0Y

【解决方案2】：

#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;
}

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

我想这就是你要找的。p>

【讨论】：

抱歉，您的解决方案不起作用，请查看我更新的小提琴。我忘了告诉我我希望它在一个占身体宽度 50% 的 div 中。
我更新了我的代码。将 50% 放在图像包装器上似乎可以实现这一点。
好吧，看看我的小提琴，当你将“img-wrapper”包装在一个占据 50% 宽度和 100% 高度的 div 中时，它显然不起作用。

【解决方案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>

【讨论】：