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（就像您所拥有的那样），您会看到占位符图片的原始大小

＆＃13;

.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:

＆＃13;

<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>

＆＃13;

使背景图像的大小与屏幕相同

1 个答案: