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

- user701254

---

CSS3её¦жњ‰background-sizeпјЊдЅ†IE8及以下版本不支持。 - Shadow The Spring Wizard

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：预览

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

Chrome

---

Firefox

---

Edge

---

IE11

要点总结

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

资源

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

- Alp

---

请查看 http://www.css3.info/preview/background-size/ 和更多理论内容请参考 http://www.w3.org/TR/css3-background/#the-background-size。 - jao

谢谢@Alp和@jao！这个答案和评论真的帮了我，而不是使用丑陋的JavaScript创建一个单独的img元素，然后设置高度和宽度，再将img放回div中。 - Kim Stacks

Answer 2

我建议使用这个：

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

希望这有所帮助 :D

如果这不能满足您的需求，请告诉我： 我可以制作一个支持多浏览器的jQuery。

- Bram B

---

一个具有多浏览器支持的jQuery将是完美的，谢谢！ - user701254

我有点懒，但是我找到了一个很好的教程，可以帮助你理解你正在做的事情：http://designshack.co.uk/?p=13616 - Bram B

Answer 3

在支持CSS的最新功能之一的浏览器中，可以使用background-size属性。

- Quentin