使用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; - 图像完全覆盖元素,同时保留纵横比(图像可以被截断)

/编辑:现在,还有更多:https://alligator.io/css/cropping-images-object-fit

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.