サイト上で動作する基本スライダがあります。背景内の背景画像を拡大する
私は非常に高解像度の画像を持っているので、画像を数百pxに拡大することができます。どのように私は特定のポイントに背景画像を拡大することができます任意のアイデア?画像は現在1スライドに1000pxあり、bgの幅を1300pxのように拡大したいと考えています。ブラウザがその幅広い場合は...
ie7 +互換性があり機能的他のブラウザでは
サイト上で動作する基本スライダがあります。背景内の背景画像を拡大する
私は非常に高解像度の画像を持っているので、画像を数百pxに拡大することができます。どのように私は特定のポイントに背景画像を拡大することができます任意のアイデア?画像は現在1スライドに1000pxあり、bgの幅を1300pxのように拡大したいと考えています。ブラウザがその幅広い場合は...
ie7 +互換性があり機能的他のブラウザでは
絶対
selectior-name-if-any img{
width:100%;
height:auto;
}
として背景と位置画像から削除しますもIE7でも動作します。
これを試してみてください:
-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/
これはどのようなブラウザサポートですか? – Nightfirecat
http://caniuse.com/#search=background-size – codef0rmer
(画像は彼らだけが表示されているほど大きなする必要があります)あなたはこのではない悲しいことに、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のメディアクエリ
画像をdiv要素の背景として使用している場合は、divとともに大きくなります(最大サイズまで小さくなるとdivが小さくなります)。イメージを表示するためにimgタグを使用している場合は、そのCSSに "width:100%"と入力してください – KBN