保持響應圖像與圖像的大小相同

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>