Html 响应式网页设计：“如何使用 CSS 根据浏览器窗口大小调整背景图像的大小”？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/7660931/
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
Responsive web design : "How to resize a background image according to browser window size using CSS"?
提问by Jamna
I am creating a site where my all products images will be re-size according to browser window size so i wrote some media queries where i used one big image and re-sized it in different window size buti have one image which i used in background , how i can re-size it? I want support it in all browser also in IE7 and 8.
我正在创建一个网站，我的所有产品图像都将根据浏览器窗口大小重新调整大小，因此我编写了一些媒体查询，其中使用了一个大图像并在不同的窗口大小中重新调整了它的大小，但我有一个图像用于背景，我怎样才能重新调整它的大小？我希望在 IE7 和 8 中的所有浏览器中都支持它。
HTML
HTML
<div></div>
CSS
CSS
div{
background: url("http://canadianneighborpharmacy.net/images/cnp/discount_20.png")
no-repeat scroll 0 0 transparent;
position:absolute;
width:45px;
height: 45px; }
My live code is here :- http://jsfiddle.net/jamna/DdxbQ/19/here i have a main "product image" which is now resizing according to browser window size(in my fiddle i didn't write code for resizing product image yet,i am only showing which image i want to resize now ) but i have a another "save-money label" image which is in background of a "span" i want to re-size simultaneously with product image.
我的实时代码在这里：- http://jsfiddle.net/jamna/DdxbQ/19/这里我有一个主要的“产品图像”，它现在根据浏览器窗口大小调整大小（在我的小提琴中，我没有为调整产品图像的大小，我只显示我现在要调整大小的图像）但我有另一个“省钱标签”图像，它位于“跨度”的背景中，我想与产品图像同时调整大小。
回答by sandeep
for this you can use background-sizeproperty
为此，您可以使用background-size财产
Like :
喜欢 ：
body{
background-size:cover;
-moz-background-size:cover;
-webkit-background-size:cover;
}
there other properties like contain& 100% 100%
还有其他属性，如contain&100% 100%
check this link http://css-tricks.com/3458-perfect-full-page-background-image/
检查此链接http://css-tricks.com/3458-perfect-full-page-background-image/
for IE you can use filter
对于 IE，您可以使用 filter
filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='.myBackground.jpg', sizingMethod='scale');
-ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='myBackground.jpg', sizingMethod='scale')";
EDIT:you live code is right but you have you define width & height in percentage like this
编辑：您的实时代码是正确的，但是您可以像这样以百分比定义宽度和高度
http://jsfiddle.net/sandeep/ayUKz/3/
http://jsfiddle.net/sandeep/ayUKz/3/
& you can use imgtag also like this http://jsfiddle.net/sandeep/RMGnM/
＆您也可以img像这样使用标签http://jsfiddle.net/sandeep/RMGnM/
img{
position:absolute;
width:100%;
height: 100%}
EDIT:
编辑：
may be that's you want http://jsfiddle.net/sandeep/DdxbQ/20/
可能这就是你想要的http://jsfiddle.net/sandeep/DdxbQ/20/
check this link also http://www.alistapart.com/d/responsive-web-design/ex/ex-site-flexible.html
也检查这个链接http://www.alistapart.com/d/responsive-web-design/ex/ex-site-flexible.html
