8

すべての製品の画像がブラウザのウィンドウ サイズに合わせてサイズ変更されるサイトを作成しているので、1 つの大きな画像を使用して別のウィンドウ サイズでサイズ変更するメディア クエリを作成しましたが、使用した画像が 1 つあります。背景、どうすればサイズを変更できますか? 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 に答える