在CSS中调整背景图片的大小使用CSS

在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

我会build议使用这个：

  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属性。