如何将背景图片拉伸以填充整个div

Question

我想要为不同的div设置背景图像，但我的问题是：

1. 图像的大小是固定的（60像素）。
2. div的大小不同。

如何拉伸背景图片以填满整个div的背景？

#div2{
  background-image:url(http://s7.static.hootsuite.com/3-0-48/images/themes/classic/streams/message-gradient.png);
  height:180px;
  width:200px;
  border: 1px solid red;
}

点击这里查看代码。

- Muhammad Usman

Answer 1

添加

background-size:100% 100%;

在你的CSS下方添加background-image属性。

你也可以指定具体的尺寸，例如：

background-size: 30px 40px;

这里：JSFiddle

- hendos43

---

IE不支持这个。应该怎么办？ - KarSho

不工作，请参考以下更好的答案：background-size:100% 100%; - chriscatfr

您需要添加background-repeat: no-repeat; - Rorrik

hendo，你的JSFiddle已经无法使用了（指向hootsuite的链接已经失效），你能否更新一下它？ - TylerH

这不起作用，下面的 background-size:cover 可以工作。 - shelbypereira

Answer 2

你可以使用：

background-size: cover;

或者只需使用大背景图像：

background: url('../images/teaser.jpg') no-repeat center #eee;

- Ouadie

---

覆盖物不会拉伸，它可以裁剪图片。 - drdrej

我不知道你想用背景图做什么，但是background-size: cover; background-position: center将填充div的背景而不拉伸图片。 - Ouadie

非常适用于那些拉伸会使图像失真的图片！ - Stijn Van Bael

Answer 3

现代CSS3（推荐用于未来并可能是最佳解决方案）

.selector{
   background-size: cover;
   /* stretches background WITHOUT deformation so it would fill the background space,
      it may crop the image if the image's dimensions are in different ratio,
      than the element dimensions. */
}

最大拉伸不变形，但可能不能填满背景：background-size: contain;

强制绝对拉伸（可能会导致变形，但不会裁剪）：background-size: 100% 100%;

“旧式”的 CSS “始终有效”的方法

将图像绝对定位在其 （相对定位的） 父元素内，并将其拉伸到父元素的大小。

HTML

<div class="selector">
   <img src="path.extension" alt="alt text">
   <!-- some other content -->
</div>

CSS3的background-size: cover;的等效方法：

要动态实现这一效果，您需要使用相反的contain方法替代方案（见下文），如果需要居中剪裁后的图像，则需要使用JavaScript来动态实现 - 例如使用jQuery：

$('.selector img').each(function(){ 
   $(this).css({ 
      "left": "50%", 
      "margin-left": "-"+( $(this).width()/2 )+"px", 
      "top": "50%", 
      "margin-top": "-"+( $(this).height()/2 )+"px" 
   }); 
});

实际例子：

CSS3 background-size: contain; 的等效方式：

这个可能有点棘手 - 超出父元素的背景尺寸将设置为CSS的100%，另一个尺寸设置为auto。 实际例子：

.selector img{
   position: absolute; top:0; left: 0;
   width: 100%;
   height: auto;
   /* -- OR -- */
   /* width: auto; 
      height: 100%; */
}

CSS3中 background-size: 100% 100%; 的等效写法：

.selector img{
   position: absolute; top:0; left: 0;
   width: 100%;
   height: 100%;
}

PS：如果要完全动态地执行“旧”方式中的覆盖/包含等价操作（这样您就不必担心溢出/比例），则需要使用JavaScript来检测比例并设置维度，如上所述...

- jave.web

Answer 4

你可以使用CSS3的background-size属性来实现此效果。代码如下：

#div2{
    background-image:url(http://s7.static.hootsuite.com/3-0-48/images/themes/classic/streams/message-gradient.png);
    -moz-background-size:100% 100%;
    -webkit-background-size:100% 100%;
    background-size:100% 100%;
    height:180px;
    width:200px;
    border: 1px solid red;
}

看这里：http://jsfiddle.net/qdzaw/1/

- sandeep

---

IE不支持此功能。该怎么办？ - KarSho

为了在IE中使用IMG标签，需要将其位置设置为绝对定位，并将高度和宽度都设置为100%。 - sandeep

Answer 5

你可以添加：

#div2{
    background-image:url(http://s7.static.hootsuite.com/3-0-48/images/themes/classic/streams/message-gradient.png);
    background-size: 100% 100%;
    height:180px;
    width:200px;
    border: 1px solid red;
}

您可以在此处阅读更多信息：css3 background-size

- Xella

---

background-size 是 CSS3 中的属性，不是所有浏览器都支持。 - Mahdi Jazini

Answer 6

通过使用CSS属性：

background-size: cover;

- Đọc truyện hay

---

background-size 是 CSS3 中的属性，不是所有浏览器都支持。 - Mahdi Jazini

Answer 7

body{
  margin:0;
  background:url('image.png') no-repeat 50% 50% fixed;
  background-size: cover;
}

- Zen Of Kursat

Answer 8

使用: background-size: 100% 100%; 来使背景图片适应div的大小。

- jagan reddy

Answer 9

为保持纵横比，请使用 background-size: 100% auto;。

div {
    background-image: url('image.jpg');
    background-size: 100% auto;
    width: 150px;
    height: 300px;
}

- Atul Yadav

Answer 10

尝试像这样做：

div {
    background-image: url(../img/picture1.jpg);
    height: 30em;
    background-repeat: no-repeat;
    width: 100%;
    background-position: center;
}

- Deejay