我正在创建一个网站,我的所有产品图片将根据浏览器窗口大小重新调整大小,所以我写了一些媒体查询,我用了一个大图像,并在不同的窗口大小重新调整大小,但我有一个图像,我用于背景,我怎么能重新调整大小呢？我想在IE7和8中的所有浏览器中支持它.
- <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/在这里我有一个主要的“产品图像”,现在根据浏览器窗口大小调整大小(在我的小提琴我没有编写调整产品图像的代码,我只显示我想要的图像现在调整大小)但我有另一个“存钱币标签”图像,在“跨度”的背景下,我想与产品图像同时重新调整大小.
解决方法
为此,您可以使用background-size属性
喜欢 ：
- body{
- background-size:cover;
- -moz-background-size:cover;
- -webkit-background-size:cover;
- }
有其他属性,如包含& 100％100％
检查此链接http://css-tricks.com/3458-perfect-full-page-background-image/
对于IE,您可以使用过滤器
- 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
