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

Question

我需要将图标图像（播放按钮）放在视频缩略图上，但无论窗口或设备的宽度如何，它都应保持在中间（垂直和水平），并且还可以根据风的宽度。我的图像可以根据窗口很好地缩放，但我的图标不是。我找到了很多解决方案，但它们都以 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>

无需转换。

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

Answer 2

这样缩放

.video-section .video-icon {
    position: absolute;
    top:50%;
    left:50%;
    transform:translate(-50%,-50%);
}

transform 以上属性只有在你添加前缀的情况下才能在所有浏览器中使用，否则它可能不适用于所有浏览器。

代码应该是这样的

.video-section .video-icon {
    position: absolute;
    top:50%;
    left:50%;
    transform:translate(-50%,-50%);
    -moz-transform:translate(-50%,-50%);
    -ms-transform:translate(-50%,-50%);
    -webkit-transform:translate(-50%,-50%);
    -o-transform:translate(-50%,-50%);
}