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

Posted 2023-03-06

【中文标题】设置 div 背景图像以适合其大小？

【英文标题】：Setting a divs background image to fit its size?

【发布时间】：2013-02-25 03:07:11

【问题描述】：

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

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

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

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

【参考方案1】：

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

background-size: 100%;

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

【讨论】：

在 css 2.1 中有什么方法吗？

@kfirba 我相信 IE9+ 支持背景大小，如果你需要的话，我相信有一些变通方法可以让它在 IE8 和之前工作:)

【参考方案2】：

为此使用background-size：

background-size: 100% 100%;

更多：

http://www.w3schools.com/cs-s-ref/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%

【讨论】：

这正是问题所在，我不想使用图像我想使用带有 BG 图像的 Div

好的，我以为您在 div 中使用了图像。那么你应该使用 background-size 属性。

【参考方案8】：

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

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