0

サイトで動作する基本的なスライダーがあります。

私はかなり高解像度の画像を持っているので、画像を数百ピクセルに拡大できます。背景画像を特定のポイントにスケーリングする方法はありますか? 画像は現在、スライドごとに 1000px です。bg の幅を 1300px のようにスケーリングしたいと考えています...ブラウザがその幅の場合...

CSS または js に対応しています。ie7+ と互換性があり、他のブラウザーでも機能するとよいでしょう。

何か案は？

4

3 に答える 3

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/

于 2012-04-30T08:02:46.713 に答える
0

ベスト プラクティス (画像は表示される大きさのみにする必要があります) とは別に、CSS プロパティを使用することもできますがbackground-size、残念ながらこれはまだ完全にはサポートされていないため、貧弱な IE のサポートを中止する必要があります。

JS を使用してwindow.innerWidth( document.documentElement.clientWidthIE の場合)チェックbackground-sizeし、ビューポートに適合する場合は -property を適用できます (CSS の方法はmedia-queriesになります)。IE の場合は、背景画像を非表示にし、その所有権filterをsizingMethod='scale'宣言で使用する必要があります。

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

JS を使用すると、ユーザーのビューポート サイズに応じてさまざまなサイズの画像を読み込むための条件付き遅延読み込み手法を確立することもできます (モバイル ユーザーは 1300²px を必要としません)。上記でさまざまな背景画像をロードします（または、respond.jsなどを使用して IE のメディア クエリをエミュレートします）

于 2012-04-30T08:03:38.547 に答える
0

背景から削除し、画像を絶対位置に配置します

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

}

IE7 でも動作するはずです。

于 2012-04-30T08:19:31.983 に答える