html - 背景图片无法在移动设备上正确显示

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。这意味着图像将始终为 1048px 高，无论屏幕如何。这可能适用于您的机器，但您的手机屏幕可能比这小得多!在 #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 将图像高度设置为视口(viewport)高度的 100%。