响应式网页设计:“如何使用 CSS 根据浏览器窗口大小调整背景图像的大小"? [英] Responsive web design : "How to resize a background image according to browser window size using CSS"?
问题描述
我正在创建一个网站,我的所有产品图像都将根据浏览器窗口大小重新调整大小,所以我编写了一些媒体查询,其中使用了一个大图像并以不同的窗口大小重新调整了它的大小强> 我有一张在背景中使用的图像,我如何调整它的大小?我希望在 IE7 和 8 中的所有浏览器中都支持它.
HTML
CSS
div{背景: url("http://canadianneighborpharmacy.net/images/cnp/discount_20.png")无重复滚动 0 0 透明;位置:绝对;宽度:45px;高度:45px;}
我的实时代码在这里:- http://jsfiddle.net/jamna/DdxbQ/19/ 这里我有一个主要的产品图像",它现在根据浏览器窗口大小调整大小(在我的小提琴中,我还没有编写调整产品图像大小的代码,我只显示我现在想要调整大小的图像) 但我有另一个省钱标签"图像,它位于跨度"的背景中,我想与产品图像同时调整大小.
为此你可以使用 background-size
属性
喜欢:
body{背景尺寸:封面;-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{位置:绝对;宽度:100%;高度:100%}
可能就是你想要的http://jsfiddle.net/sandeep/DdxbQ/20/一个>
也检查此链接 http://www.alistapart.com/d/responsive-web-design/ex/ex-site-flexible.html
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 but i 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.
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; }
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.
for this you can use background-size
property
Like :
body{
background-size:cover;
-moz-background-size:cover;
-webkit-background-size:cover;
}
there other properties like contain
& 100% 100%
check this link http://css-tricks.com/3458-perfect-full-page-background-image/
for IE you can use 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/
& you can use img
tag also like this 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/
check this link also http://www.alistapart.com/d/responsive-web-design/ex/ex-site-flexible.html
这篇关于响应式网页设计:“如何使用 CSS 根据浏览器窗口大小调整背景图像的大小"?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!