2012-04-30 20 views
0

サイト上で動作する基本スライダがあります。背景内の背景画像を拡大する

私は非常に高解像度の画像を持っているので、画像を数百pxに拡大することができます。どのように私は特定のポイントに背景画像を拡大することができます任意のアイデア?画像は現在1スライドに1000pxあり、bgの幅を1300pxのように拡大したいと考えています。ブラウザがその幅広い場合は...

ie7 +互換性があり機能的他のブラウザでは

+0

画像をdiv要素の背景として使用している場合は、divとともに大きくなります(最大サイズまで小さくなるとdivが小さくなります)。イメージを表示するためにimgタグを使用している場合は、そのCSSに "width:100%"と入力してください – KBN

答えて

0

絶対

selectior-name-if-any img{ 
width:100%; 
height:auto; 

}

として背景と位置画像から削除します

もIE7でも動作します。

0

これを試してみてください:

-o-background-size: width height;   
-webkit-background-size: width height; 
-khtml-background-size: width height;  
-moz-background-size: width height;  
background-size: width height; 

デモ:アパートのベストプラクティスからhttp://jsfiddle.net/tfazD/

+0

これはどのようなブラウザサポートですか? – Nightfirecat

+0

http://caniuse.com/#search=background-size – codef0rmer

0

(画像は彼らだけが表示されているほど大きなする必要があります)あなたはこのではない悲しいことに、CSSプロパティbackground-sizeを使用することができますまだ完全にサポートされているので、貧弱なIEのサポートを中止する必要があります。 JSを使用して

ます(IE用document.documentElement.clientWidth)をwindow.innerWidthをチェックし、それがビューポートに収まる場合(CSSの方法がmedia-queriesだろう)background-size -propertyを適用することができます。 IEの場合は、背景イメージを隠して、filterの独自のものを使用して、sizingMethod='scale'宣言を付けなければなりません。

また、ブラウザがbackground-sizeプロパティをサポートしていない場合(これを検出するにはmodernizrを使用できます)、z-index:-9999;を適用するとバックグラウンドのままです。

JSを使用すると、ユーザーのビューポートサイズに応じてさまざまなサイズの画像を読み込むための条件付き遅延ローディング手法を設定することもできます(モバイルユーザーは1300²xを必要としません)。IE8以前のサポートを中止することもできます異なる背景イメージをロード(またはIEのメディアクエリをエミュレートするrespond.jsようなものを使用)する上記CSSのメディアクエリ