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

Question

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

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

是否可以设置 Divs 背景图像以适应<div>大小？

假设我有一个400x400的 div 和一个1000x1000的图像，是否可以将图像缩小到400x400并因此适合<div>大小？

Answer 1

如果你想使用CSS3，你可以很简单地使用背景大小 ，如下所示：

background-size: 100%;

它受到所有主流浏览器（包括IE9 +）的支持。 如果您想在IE8中使用它，请查看此问题的答案。

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');
}

Answer 9

这应该有效，但不会保持图像纵横比：

 background-size: 100% 100%;