响应式网页设计：“如何使用 CSS 根据浏览器窗口大小调整背景图像的大小”？

Question

我正在创建一个网站，其中我的所有产品图像将根据浏览器窗口大小重新调整大小，因此我编写了一些媒体查询，其中我使用了一张大图像并以不同的窗口大小重新调整了它的大小，但是我我有一张在背景中使用的图像，我如何调整它的大小？我希望所有浏览器都支持它，包括 IE7 和 8。

HTML

<div></div>

CSS

div{ 
background: url("http://canadianneighborpharmacy.net/images/cnp/discount_20.png") 
no-repeat scroll 0 0 transparent;
position:absolute;
width:45px; 
height: 45px; }

我的实时代码在这里：- http://jsfiddle.net/jamna/DdxbQ/19/ 这里我有一个主要的“产品图像”，现在正在根据浏览器调整大小窗口大小（在我的小提琴中，我还没有编写用于调整产品图像大小的代码，我只显示我现在想要调整大小的图像），但我有另一个“省钱标签”图像，它位于“跨度”的背景中“我想与产品图像同时调整大小。

Answer 1

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

例如：

body{
background-size:cover;
-moz-background-size:cover;
-webkit-background-size:cover;
}

还有其他属性，例如 contain & 100% 100%

检查此链接 http: //css-tricks.com/3458-perfect-full-page-background-image/

对于 IE，您可以使用 filter

filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='.myBackground.jpg', sizingMethod='scale');
-ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='myBackground.jpg', sizingMethod='scale')";

编辑：
您的实时代码是正确的，但您需要定义宽度和宽度高度百分比，如下所示

http://jsfiddle.net/sandeep/ayUKz/3/

& ;您也可以像这样使用 img 标签 http://jsfiddle.net/sandeep/RMGnM /

img{
position:absolute;
width:100%;
height: 100%}

编辑：

可能就是您想要的http://jsfiddle.net/sandeep/DdxbQ/20/

也检查此链接http://www.alistapart.com/d/responsive-web-design/ex/ex-site-flexible.html