Question

为什么我调整图片大小时为什么图片接近浏览器顶部，我试图使移动设备响应，但我无法使其正常工作。有人对做这项工作有什么误解吗？

.background-1 {
  width:100%;
  height: 100%;
  overflow:hidden;
}
.title {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: #a57354;
  text-align: center;
}

<div class="background-1">
  <img src="Image-1.png" class="img" /> 
  <div class="title">
  <div class="info">
  <img class="wow rotateIn img-logo" src="logo.png">
    <h4 class="wow fadeinUp"> DIN PERSONLIGA BARBERARE I GÄVLE </H4>
  </div>
  </div>
  </div>

Answer 1

使用div代替img并将徽标设置为div背景。您可以在页面中更好地控制div，这更加标准。

Answer 2

请检查是否对您有帮助。.我已将img-fluid类添加到两个图像中。谢谢

将position:relative添加到.background-1类。如果您不放置它，那么具有绝对位置的div将基于窗口移动。谢谢

.background-1 {
  width:100%;
  height: 100%;
  overflow:hidden;
  position:relative
}
.title {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: #a57354;
  text-align: center;
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css">
<div class="background-1">
  <img src="https://cdn.colorlib.com/shapely/wp-content/uploads/sites/12/2016/03/photo-1422568374078-27d3842ba676-1.jpg" class="img img-fluid" /> 
  <div class="title">
  <div class="info">
  <img class="wow rotateIn img-logo img-fluid" src="https://www.freelogodesign.org/Content/img/logo-ex-7.png">
    <h4 class="wow fadeinUp"> DIN PERSONLIGA BARBERARE I GÄVLE </H4>
  </div>
  </div>
  </div>

Answer 3

对于移动显示器，图像的纵横比似乎不正确。

建议您为移动设备使用其他图片，该图片的高度>宽度。这将导致图像拉伸（错误辅助）。

如果您仍然希望该图像填满整个屏幕，请使用 position：absolute 并将高度设置为100％；

当我调整边框大小时，我的图像会一直上升到顶部吗？

3 个答案: