Question

我似乎无法使用下面的代码在移动设备中使图像适合整个屏幕。在我自己的电脑上，它看起来很完美。

#topContainer {

  height:1048px;
  width: 100%;

  padding: 0;
  margin: 0;

}

#div1 {

  background-image: url("images/Healthy-Eating.png");
  height:1048px;

  margin: 0;
  background-size:cover;
  position: relative;
  padding-top: 40px;
}



#freeEbook {

  background-color: rgba(0, 0, 0, 0.6);
  height: 750px;
  width: 535px;
  border-bottom: 0px;
  transition: background-color .5s ease 0s;
  position: absolute;
  color: #fff;
  font-size: 1em;
  padding: 10px;

}

为什么会发生这种情况，我该如何解决？

Answer 1

您为图像设置了固定高度1048像素#div1。这意味着无论屏幕如何，图像总是高达1048像素。这可能适用于您的机器，但您的手机屏幕可能比这小得多！在#div1上尝试以下CSS：

#div1 {
  background-image: url("images/Healthy-Eating.png");
  height: 100vh;
  width: 100%;
  margin: 0;
  background-size:cover;
  position: relative;
  padding-top: 40px;
}

height: 100vh将图像高度设置为视口高度的100％。

背景图像没有正确显示在移动设备上

1 个答案: