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

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