将背景图像设置为屏幕大小

Question

我希望背景图片填满屏幕并且不担心丢失纵横比。一切都真实了，别以为我遗漏了任何明显的东西……

HTML：

.phone {
  margin: auto;
  height: 737px;
  width: 654px;
  background-image: url("/imgs/phone.png");
  position: fixed;
  top: 50%;
  left: 50%;
  display: block;
}

.container {
  position: fixed;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  margin: auto;
  height: 536px;
  width: 350px;
  border: 1px solid;
  border-radius: 5px;
  display: block;
}

iframe {
  width: 350px;
  /* adjust to your needs */
  max-width: 100%;
  /* to make it responsive */
}

body {
  background-image: url("/imgs/CV.png");
  background-repeat: no-repeat;
  background-size: auto;
  margin: 0;
  height: 100%;
  min-height: 100%;
}

The CSS:

  body {
    background-color: #93B874;
  }
</style>

<body>
  <div className="phone" style="margin:auto; height: 630px;width: 558px; background-image:url(/imgs/phone.png); top:50%; left:50%;">
    <div className="container">
      <iframe style="height: 458.18px; width: 290px; margin: auto; position: relative; top: 85px; left: 132px;" src="http://foodsharing-production.herokuapp.com"></iframe>
    </div>
  </div>
</body>

</html>

预览： http://soupedupkitchencom.fatcow.com/CV/CV.html

Answer 1

将 background-size: cover 添加到 body

的规则中

或者如果您想确保显示整个背景图像并且真的不关心图像失真，您可以使用 background-size: 100% 100%;

这是您的代码片段。如果将 body 的背景大小改回 auto（如您所愿），您会看到占位符图像的原始大小

.phone {
  margin: auto;
  height: 737px;
  width: 654px;
  background-image: url("/imgs/phone.png");
  position: fixed;
  top: 50%;
  left: 50%;
  display: block;
}

.container {
  position: fixed;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  margin: auto;
  height: 536px;
  width: 350px;
  border: 1px solid;
  border-radius: 5px;
  display: block;
}

iframe {
  width: 350px;
  /* adjust to your needs */
  max-width: 100%;
  /* to make it responsive */
}

body {
  background-image: url("http://placehold.it/200x150/fa0?text=this is an image");
  background-repeat: no-repeat;
  background-size: 100% 100%;
  margin: 0;
  height: 100%;
  min-height: 100%;
}

The CSS:

<body>
  <div className="phone" style="margin:auto; height: 630px;width: 558px; background-image:url(/imgs/phone.png); top:50%; left:50%;">
    <div className="container">
      <iframe style="height: 458.18px; width: 290px; margin: auto; position: relative; top: 85px; left: 132px;" src="http://foodsharing-production.herokuapp.com"></iframe>
    </div>
  </div>
</body>

将背景图像设置为屏幕大小

Make background image the size of screen

html

css

background-image