javascript - 如何相对于 img 大小调整图像叠加大小

Question

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

我已经尝试了一些 JS 代码但不起作用。它始终将宽度/高度设置为 0 像素。

请告诉我如何解决这个问题。

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 设置叠加层。在叠加层上使用 绝对 定位，在父级上使用 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>