html - 如何响应地在另一个图像上缩放图像

Question

我需要将图标(播放按钮)的图像放在视频的缩略图上，但无论窗口或设备的宽度如何，它都应该保持在中间(垂直和水平)，并且还可以根据windwos 宽度。我的图像根据窗口缩放得很好，但我的图标不是。我找到了很多解决方案，但它们都以 px 为单位定义了高度和宽度，这是我不想要的。我希望我的图标根据窗口宽度具有动态宽度和高度。

这是我的CSS

.video-section .video-icon {
    position: absolute;
    top: 36%;
    left: 43.8%;
}
.video-section .bg-img {
    position: relative;
}

Answer 1

或者你可以这样做:

.video-section .bg-img {
  position: relative;
  background: lightblue;
  height: 300px;
  width: 50%;
}

.video-section .video-icon {
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  margin: auto;
  height: 50%;
  width: 50%;
}

<div class="video-section">
  <div class="bg-img">
    <img src="http://placehold.it/30x30" alt="" class="video-icon">
  </div>
</div>

无需转换。

编辑用户百分比宽度/高度以使图标响应。