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

【问题标题】：Setting a divs background image to fit its size?设置 div 背景图像以适合其大小？
【发布时间】：2013-02-25 03:07:11
【问题描述】：

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

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

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

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

【问题讨论】：

标签： image css

【解决方案1】：

如果你想使用 CSS3，你可以很简单地使用 background-size，就像这样：

background-size: 100%;

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

【讨论】：

【解决方案2】：

为此使用background-size：

background-size: 100% 100%;

更多：

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

【讨论】：

【解决方案3】：

使用background-size 属性来实现这一点。您应该在cover、contain 和100% 之间进行选择——具体取决于您想要获得什么。

【讨论】：

【解决方案4】：

您可以使用 background-size 属性来实现这一点，现在大多数浏览器都支持该属性。

缩放背景图像以适应 div：

background-size: contain;

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

background-size: cover;

【讨论】：

【解决方案5】：

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

background-size: cover;

【讨论】：

【解决方案6】：

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

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

【讨论】：

【解决方案7】：

把你的css设置成这个

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

【讨论】：

【解决方案8】：

想为IE8及以下（我认为是IE5.5低）添加解决方案，不能使用background-size

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

【讨论】：