2011-06-23 1 views
3

究極の目標は、まさにこの例のようにalmsotされ、非常に簡単なギャラリーを作成することです:ウィンドウサイズに基づいてimage/divディメンションを動的に変更するにはどうすればよいですか? (私にとっては)

例: http://www.iheartdropdead.com/spring-summer-lookbook-2011.html

しかし、このギャラリーはFlashを使用して作られていると私は私が欲しいですHTML、CSS & Javascript互換性のために、私はFlashを使用しないでください。

freelancer-id.com/easy-gallery/2

私の主:

は、私は何の問題ギャラリー自体を私はこのようなものを使用することができますので、(イメージがお互いに移行)することがありません私がやっている闘争は、私がそれをしたいと思う方法でページを埋めることです。上記の例を見て、ウィンドウのサイズを変更すると、2つの重要なことが分かります。

  1. ウィンドウ 1.1の幅に合わせて、ギャラリーの幅のサイズを変更します。ギャラリーの高さに達すると、ウィンドウの高さに合わせてギャラリーが水平に配置されます。
  2. ウィンドウの高さに合わせてギャラリーを中央に配置します。 2.1ギャラリーの幅に達すると、今...私はコーディングのこの部分を利用して最初の目的のハーフ達成したウィンドウ

imgscale.kjmeath.com/

これはへの拡大イメージをダウンスケーリングするための素晴らしい作品含有Divの幅に合わせる。ただし、現在のところ、ページが読み込まれたときにのみ実行され、ウィンドウのサイズを変更すると変更されません。

私はどのように知りません:動的誰もが何かアドバイスを持っているかを指すことができればNtheのウィンドウサイズ は*垂直/水平コンテナのdiv

内の画像を中心Oによってはギャラリーのサイズを変更

*私はいくつかのチュートリアルやプラグインに向けて助けてくれるでしょう。

ことができます場合は、私はここでそれをダウンロードして何をやったかを見てCNAの:http://www.megaupload.com/?d=24CRQ46E

答えて

2

私はあなたが何をしたいの多くはうまく設計された流体のCSSレイアウトを経て達成することができると思います。しかし、難しいことは、jQueryの.resize()メソッドを使用して、ウィンドウのサイズ変更イベントにバインドし、それに応じてコードを実行できることです。

3

あなたはメディアクエリでそれを行うことができます。人々はこの「反応性の高い」デザインと呼ぶようになりました。異なる解像度のCSSシートを用意するだけです。

<link rel="stylesheet" type="text/css" 
    media="screen and (max-device-width: 480px)" href="style.css" /> 

ここでは、もう少し説明して記事です:http://www.alistapart.com/articles/responsive-web-design/

このような
関連する問題