如何调整图像重叠大小相对于img大小

Question

我想要设置我的图像上的覆盖图，当我将图像悬停在图像上时，图像上会出现覆盖图，并与图像大小相同。当我调整窗口大小时，叠加层应该自动调整大小。

我试过一些JS代码，但不起作用。它始终将宽度/高度设置为0px。

请让我知道如何解决这个问题。

var portImg = document.getElementById("portimg"); 
 
var overlay = document.getElementsByClassName("overlay"); 
 
var overlayh = overlay.style.height = portImg.clientHeight; 
 
var overlayw = overlay.style.width = portImg.clientWidth; 
 
/* 
 
tried this 1 too 
 

 
clientHeight + "px"; 
 
clientWidth + "px"; 
 
*/

.col-sm-6 { 
 
    position: relative; 
 
} 
 

 
.img-container { 
 
    width=100% 
 
} 
 

 
.img-container img { 
 
    width=100% 
 
} 
 

 
.overlay { 
 
    position: absolute; 
 
    margin-top: 20px; 
 
    text-align: center; 
 
} 
 

 
.overlay:hover { 
 
    transform: rotate(0deg); 
 
    opacity: .95; 
 
}

<div class="col-sm-6"> 
 
    <div class="overlay"> 
 
    </div> 
 
    <!-- overlay continer --> 
 

 
    <div class="img-container"> 
 
    <img id="portimg" src="images/port.jpg" alt=""> 
 
    </div> 
 
    <!-- img container --> 
 
</div> 
 
<!-- col -->

Answer 1

您可以使用CSS单独使用或者自己的元素或伪元素的覆盖。使用absolute定位在覆盖图上，定位在父层上，覆盖图将自动与父层进行缩放。

.img-container { 
 
    position: relative; 
 
} 
 

 
.img-container img { 
 
    display: block; 
 
    width: 100%; 
 
} 
 

 
.overlay { 
 
    position: absolute; 
 
    top: 0; left: 0; right: 0; bottom: 0; 
 
    text-align: center; 
 
    opacity: 0; 
 
    transition: opacity .25s; 
 
    background: black; 
 
    color: white; 
 
    display: flex; 
 
    align-items: center; 
 
    justify-content: center; 
 
    font-size: 1em; 
 
} 
 

 
.img-container:hover .overlay { 
 
    opacity: .5; 
 
}

<div class="img-container"> 
 
    <img id="portimg" src="http://kenwheeler.github.io/slick/img/fonz1.png" alt=""> 
 
    <div class="overlay">overlay</div> 
 
</div>

如果你还是希望有重叠的宽度和高度通过JavaScript控制，我会创建一个高度匹配的功能，并调用在页面加载以及对window的resize事件。

.img-container { 
 
    position: relative; 
 
} 
 

 
.img-container img { 
 
    display: block; 
 
    width: 100%; 
 
} 
 

 
.overlay { 
 
    position: absolute; 
 
    top: 0; left: 0; 
 
    /* right: 0; bottom: 0; */ 
 
    text-align: center; 
 
    opacity: 0; 
 
    transition: opacity .25s; 
 
    background: black; 
 
    color: white; 
 
    display: flex; 
 
    align-items: center; 
 
    justify-content: center; 
 
    font-size: 1em; 
 
} 
 

 
.img-container:hover .overlay { 
 
    opacity: .5; 
 
}

<div class="img-container"> 
 
    <img id="portimg" src="http://kenwheeler.github.io/slick/img/fonz1.png" alt=""> 
 
    <div class="overlay" id="overlay">overlay</div> 
 
</div> 
 

 
<script> 
 
    function matchHeight() { 
 
    var img = document.getElementById('portimg'), 
 
     overlay = document.getElementById('overlay'); 
 
    overlay.style.width = img.offsetWidth + 'px'; 
 
    overlay.style.height = img.offsetHeight + 'px'; 
 
} 
 

 
window.addEventListener("load",function() { 
 
    matchHeight(); 
 
}); 
 

 
window.addEventListener("resize", function() { 
 
    matchHeight(); 
 
}); 
 
</script>