Question

我创建了以下div：

<div class="author">Photography by Carla Bertomeu Photography </div>

我的div的CSS是：

.author {
position: fixed;
top: 47vw;
left: 50vw;
transform: translate(-50%, -50%);
font-size: 0.8vw;
font-family: 'Oswald', sans-serif;
color: white;
}

这很完美。当我调整屏幕大小时，Div文本不会不合适。

当我尝试对图像执行相同操作时，当我调整窗口大小时图像变得不合适，因为大小保持不变。这是设置：

HTML：

<div id="facebook">
<img class="facebook-bottom" src="facebook-colored.png" alt="Facebook" />
<img class="facebook-top" src="facebook.png" alt="Facebook" />
</div>

CSS：

#facebook {
max-width: 100%;
position: fixed;
top: 48vw;
left: 50vw;
transform: translate(-50%, -50%);
}

#facebook img {
  position:absolute;
  left:0;
  -webkit-transition: opacity 0.2s ease-in-out;
  -moz-transition: opacity 0.2s ease-in-out;
  -o-transition: opacity 0.2s ease-in-out;
  transition: opacity 0.2s ease-in-out;
}

#facebook img.facebook-top:hover {
  opacity:0;
}

什么是使图像变小的最佳方法，就像我调整窗口大小时的文字一样？

页面底部的响应积分区域

0 个答案: