设置divs背景图像以适合其大小？

Question

我有<div>背景图片。

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

是否可以将Divs Background图像设置为适合<div>尺寸？

假设我有一个400x400的div和一张1000x1000的图片，是否可以将图片缩小为400x400，因此符合<div>尺寸？

Answer 1

如果你想使用CSS3，你只需使用 background-size 就可以做到这一点，如下所示：

background-size: 100%;

所有主流浏览器（包括IE9 +）都支持它。如果您想在IE8及之前使用它，请查看this question的答案。

Answer 2

为此目的使用background-size：

background-size: 100% 100%;

更多信息：

  

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

Answer 3

使用background-size属性来实现这一目标。您应该在cover，contain和100%之间进行选择 - 具体取决于您希望获得的内容。

Answer 4

您可以使用background-size属性实现此目标，现在大多数浏览器都支持该属性。

缩放背景图像以适合div：

background-size: contain;

缩放背景图片以覆盖整个div：

background-size: cover;

Answer 5

使用它，因为它也可以作为响应。 ：

background-size: cover;

Answer 6

您可以使用CSS3 background-size属性。

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

Answer 7

将你的CSS设置为此

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

Answer 8

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

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