我有一个绝对定位的图像。图像有一个叠加层,该叠加层应始终与图像的尺寸相同。
请注意,图片是响应式的。意思是,如果用户调整窗口大小,图像的长度和/或高度将增加。叠加层必须做出相应的 react 。
我面临的问题是,如果用户增加浏览器的宽度,叠加层会根据图像增加高度,但是,图像也会增加高度,以免产生干扰的图片。尽管用户只增加了浏览器的宽度,但图像的增加导致了叠加层和图像之间的大小差异。
问题动图:https://gyazo.com/e90fd418df20a622712b73422d1022b8
我应该如何解决这个问题?
这是我的一个非常糟糕的方法:
基本上我有一个包含 img 和覆盖层的 div#img-wrapper。 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>
最佳答案
#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>
我认为这就是您要找的。p>
关于javascript - 保持响应式图像叠加层与图像大小相同,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/55169801/