8

我正在创建一个网站,我的所有产品图像都将根据浏览器窗口大小重新调整大小,因此我编写了一些媒体查询,其中我使用了一张大图像并以不同的窗口大小调整了它的大小,但我有一张我使用的图像背景,我如何重新调整它的大小?我希望在 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/这里我有一个主要的“产品图像”,现在根据浏览器窗口大小调整大小(在我的小提琴中,我没有为调整产品图像的大小,我现在只显示要调整的图像)但我有另一个“省钱标签”图像,它位于“跨度”的背景中,我想与产品图像同时调整大小。

4

1 回答 1

21

为此,您可以使用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

于 2011-10-05T12:01:33.980 回答