Question

我需要在视频的缩略图上放置一个图标（播放按钮）图像，但无论窗口或设备的宽度如何，它都应保持在中间（垂直和水平），并根据windwos宽度。我的图像根据窗口缩放得很好，但我的图标不是。我发现了许多解决方案，但它们都以px定义了高度和宽度，这是我不想要的。我希望我的图标根据窗口宽度具有动态宽度和高度。

这是我的css

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

Answer 1

或者你可以这样做：

＆＃13;

background-attachment: fixed;
background-position: center;

＆＃13;

.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%;
}

＆＃13;

无需转换。

修改：用户百分比宽度/高度，使图标响应。

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%);
}

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

2 个答案: