HTML - 背景大小包含太小的图像

Question

我用：

<style>
body {
    background-image: url("http://www.drought-smart-plants.com/images/two-succulents-flowering-21457588.jpg");
    background-repeat: no-repeat;
    background-size: contain;
}
</style>

试图让背景图像始终伸展以显示整个图像，但是当我测试它时，图像变得很小......这是什么问题？

Answer 1

你需要给身体一个高度。

html, body {
     height: 100%;
}
body {
    background-image: url("http://www.drought-smart-plants.com/images/two-succulents-flowering-21457588.jpg");
    background-repeat: no-repeat;
    background-size: contain;
}

或者您可以添加“背景div”。

#bkg {
  position:absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom:0;
  
  background-image: url("http://www.drought-smart-plants.com/images/two-succulents-flowering-21457588.jpg");
  background-repeat: no-repeat;
  background-size: contain;
}

<div id="bkg"></div>

Answer 2

这将通过取出background-size:contain

来显示图像的完整分辨率

Results