2011-07-12 3 views
0

私はSupersizedを使用して背景画像を拡大しています。問題は、画像を複数の解像度で見栄え良くするには、画像を大きくする必要があります。 2000ピクセル* 2000ピクセル。しかし、なぜ誰かが解決策を持っているべきですか? 800 * 600のような大きな画像をダウンロードする必要がありますか?だから私がしたいのは、画像の3つのサイズ(1024 * n、1680 * n、2000 * n)を持っていて、その解像度に応じて、できるだけ小さいものがユーザー。どのように私はこれを実装する必要がありますか?バックグラウンドイメージSupersizedで異なる解像度でサイジング/ロードする

答えて

1

のJavascriptのwindow.screen.width意志を使用します画面の実際のピクセル幅を返すので、単純なif文を使用して、使用するイメージを選択することができます。

if(window.screen.width < 1000) { 
    image = "small.jpg"; 
} else { 
    image = "large.jpg"; 
} 
+0

良い見え、後で家に帰るときにこれを試してみます。 – Andrija

+0

そしてそれは良い作品です、ありがとう:) – Andrija

0

ユーザー・ウィンドウの幅を決定してから、使用したいんどの画像を決定する$(window).width();(http://api.jquery.com/width/)を使用することができます -

$('#yourImageId').attr('src', 'images/alt/imagename.jpg'); 
+0

の概念を使用して、クライアント側でのプログラムCSSを作成するには?チェックを行った後に180Pユーザーがブラウザを最大化するとどうなりますか? – shanethehat

+0

これを見てください:http://stackoverflow.com/questions/1091540/how-to-get-screen-resolution-of-visitor-in-javascript-and-or-php – kleinohad

+0

申し訳ありませんが、私は従いません。私は、画面ではなく画面の幅を使用することをお勧めします理由は、ユーザーが高解像度の画面を持つことができますが、ブラウザが最大化されていないためです。その場合、ユーザーが画面を最大化することを決定すると厄介なように見える低解像度の画像を配信します。 'window.screen.width'は実際のモニタの解像度を返します。http://www.javascriptkit.com/howto/newtech3.shtml – shanethehat

0

多くの方法:他の人がその上に基づいて、画面の横幅を取得し、前記したよう

  1. 、要素の背景画像源を操作します。
  2. 使用Less
  3. が、これは、ブラウザではなく、画面の幅を返しませんresponsive-images
関連する問題