画像のオーバーレイサイズを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の位置を使用し、親に位置するrelativeを使用すると、オーバーレイは親と自動的に縮尺されます。

.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>