Html 如何设置适合div的背景图像的大小
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/3653406/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
how to set size of background image fit to the div
提问by piku
I want to set div background image
div(w:932, h:148) and the image size is 1524*587
whan I trying to set it image is not getting fit to the div size what should i do? my code-
我想设置 div 背景图像 div(w:932, h:148) 并且图像大小为 1524*587 当
我尝试设置它时图像不适合 div 大小我该怎么办？我的代码-
.header .logo { width:932px; height:148px; background:url(images/logo.jpg) no-repeat center;}
回答by BalusC
You coulduse the CSS3 background-sizeproperty for this.
您可以为此使用 CSS3 background-size属性。
.header .logo {
background-size: 100%;
}
But then you still have the problem of wide (or not) browser support. Your best bet is then really to use a "plain vanilla" <img>element whose width/height is set to 100%.
但是你仍然有广泛（或不）浏览器支持的问题。那么你最好的选择是真正使用一个“普通香草”<img>元素，其宽度/高度设置为100%.
回答by Guffa
You can't resize a background image in the currently supported version of CSS (2.1).
您无法在当前支持的 CSS (2.1) 版本中调整背景图像的大小。
You could layer elements on top of each other, so that you get an image element behind your content, but you should rather resize the actual image than doing it when displaying it. That would roughly reduce the file size to a fifth.
您可以将元素层叠在一起，以便在内容后面获得一个图像元素，但您应该调整实际图像的大小，而不是在显示时进行调整。这将大致将文件大小减少到五分之一。
