使用css调整div中的背景图像大小

Question

在css下方设置两个div的单独背景;如果图像不符合div大小，则图像会重复出现。

如何使用css拉伸图像以适应div所需的空间？

<style type="text/css">   
#contentMain {  
  margin-bottom: 5%; 
  margin-top: 10%;
  margin-left: 10%;
  margin-right: 10%;
  background: url( /jQuery/mypage/img/background1.png )
}  
#page1 {    
  background: url( /jQuery/mypage/img/background2.png )  
} 
</style> 

Answer 1

答案

您有多种选择：

1. background-size: 100% 100%; - 图像被拉伸（纵横比可能会保留，具体取决于浏览器）
2. background-size: contain; - 图像在不保留图像的情况下进行拉伸，同时保留纵横比
3. background-size: cover; - 图像完全覆盖元素，同时保留纵横比（图像可以被截断）

/ edit：现在，还有更多：https://alligator.io/css/cropping-images-object-fit

Demo on Codepen

2017年更新：预览

以下是一些浏览器的屏幕截图，以显示它们之间的差异。

铬



---

火狐



---

边线



---

IE11



外卖留言

background-size: 100% 100%;产生最不可预测的结果。

资源

• https://alligator.io/css/cropping-images-object-fit

Answer 2

我建议使用它：

  background-repeat:no-repeat;
  background-image: url(your file location here);
  background-size:cover;(will only work with css3)

希望它有所帮助：D

如果这不支持您的需求，请说出来： 我可以为多浏览器支持制作一个jquery。

Answer 3

这些浏览器中的background-size属性支持CSS的这一新功能。