将 div 的背景图像调整为适应其大小？

Question

我有一个带有背景图片的 <div>。

<div> 的大小可能会随着时间而变化。

是否可以将 <div> 的背景图片设置为适应 <div> 的大小？

假设我有一个 400x400 大小的 div 和一个 1000x1000 大小的图片，是否可以缩小图片到 400x400，从而使其适应 <div> 的大小？

- kfirba

Answer 1

如果您想使用CSS3，可以使用< strong>background-size，非常简单，如下所示：

background-size: 100%;

它被所有主流浏览器支持（包括IE9+）。如果想要在IE8及更早版本中使用它，请查看这个问题的答案。

- dsgriffin

---

有没有任何方式可以在 CSS 2.1 中实现它？ - kfirba

@kfirba 我相信IE9+支持background-size，如果需要的话，我确定有解决方法可以让它在IE8及更早版本中正常工作 :) - dsgriffin

Answer 2

使用background-size来完成这个目的：

background-size: 100% 100%;

更多内容请参考：

http://www.w3schools.com/cssref/css3_pr_background-size.asp

- user1386320

Answer 3

使用background-size属性来实现这一点。根据您想要的具体效果，应选择cover、contain或100%中的一个。

- MarcinJuraszek

---

完美运作。 - Nabeel

覆盖和包含是我不知道的事情，谢谢你比被接受的答案更详细。 - CJT3

Answer 4

您可以使用background-size属性来实现此功能，该属性现在被大多数浏览器支持。

要将背景图片缩放以适应div的大小：

background-size: contain;

为了使背景图片覆盖整个div，可以采用以下方法：

background-size: cover;

- Prajwal

Answer 5

使用此功能还可以实现响应式设计：

background-size: cover;

- Sankalp Singha

Answer 6

你可以使用CSS3的background-size属性来实现此功能。

.header .logo {
background-size: 100%;
}

- Haresh Shyara

Answer 7

这个应该可以工作，但是不会保持图像的纵横比：

 background-size: 100% 100%;

- Sharhabeel Hamdan

Answer 8

将你的 CSS 设置为这样：

img {
    max-width:100%,
    max-height100%
}

- miguel.gazela

---

那正是问题所在，我不想使用图像，我想使用带有背景图的Div。 - kfirba

好的，我以为你是在 div 内使用图像。那么你应该使用 background-size 属性。 - miguel.gazela

Answer 9

想要为IE8及以下版本（低至IE5.5）添加解决方案，因为它们无法使用background-size

div{
filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src=
'/path/to/img.jpg', sizingMethod='scale');
}

- chiliNUT