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

【问题标题】：HTML - Background size contain gives too small imageHTML - 背景大小包含的图像太小
【发布时间】：2015-11-11 06:02:50
【问题描述】：

我用：

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

试图让背景图像始终拉伸以显示整个图像，但是当我对此进行测试时，图像变得很小...这是怎么回事？

【问题讨论】：

标签： html image background-size

【解决方案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;
}

&lt;div id="bkg"&gt;&lt;/div&gt;

【讨论】：

【解决方案2】：

这将通过取出background-size:contain显示图像的完整分辨率

Results

【讨论】：

这样做的缺点是当视口小于图像时它会“剪切”图像。