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＆amp; 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')";

修改你现场代码是对的，但你有你定义宽度＆amp;像这样的高度百分比

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

＆安培;您也可以像http://jsfiddle.net/sandeep/RMGnM/
一样使用img标记
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

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

1 个答案: