jQuery - 動的に設定された幅のdiv内の画像を囲みます

Question

EDIT 1/27/12 11:32 am - 私はこのスクリプトに関連するすべての問題を修正したと思います。私は、左または右に浮かべたいか、それとも中央に置くかによって、サイズを変更したいそれぞれの画像にCSSクラスを適用する必要がありますが、私はそれで生きることができます。 http://evanwebdesign.com/responsive-web-design/example5.html

編集で1/27/12 10:50に私の最新の説明とデモを参照してください - まだこのスクリプトに問題があります。以下の私のコメントを参照してください。修正の作業。

編集1/27/12 9:00 am：この問題はほぼ完了しました。私は現在、http://evanwebdesign.com/responsive-web-design/example.htmlに掲載ブラウザウィンドウの幅に応じて調整し対応する画像の例を持っているhttp://www.evanwebdesign.com/responsive-web-design/example3.htmlで私の例を参照してください、私のオリジナルの例

との比較。

EDIT 1/16/12：私はより精巧な例を作っている（うまくいけば）簡単にhttp://evanwebdesign.com/responsive-web-design/example2.html

で理解することが私の質問になりますが、私は私の#content divの中に複数のイメージがあるとしていること？そして、彼らはすべて幅が違うとしますか？私は手動で幅の値を計算し、すべての画像のカスタムクラスで囲むdivを作成したくありません！

代わりに、私は次の操作を行いますjQueryのスクリプトを書きたい：#content divの

内のすべての画像を通して

• Goでは、各画像の幅を取得します（私はそのI実現これ以外の場合は$（window）.load（）を使用する必要があります。

• イメージの幅をピクセル単位で取り、900で割ります（900は任意の最大幅ですパッドの後の#content divのピクセル値dingが適用されています）。

  前の手順で作成した新しい番号を、画像の周りの新しいdivを含む幅に適用します。

目標は、動的に#content divの内の各画像の.home_photo div要素を作成することです。マークアップがHTMLに表示されないので、CSSがインラインで書かれているかどうかは気にしません。

この質問が明確かどうか、もっと自分自身を説明するために他に何かがあるかどうか教えてください。この質問には多くのステップが含まれています。

おかげさまで皆様のお役に立てれますようお願い申し上げます。

Answer 1

は私だけ

<style> 
    .home_photo img 
    { 
     width:900px; 
    } 
</style> 

は、私は、これはトリックを行うだろうと思い

EDIT

をsmthing誤解なら、私を知ってみましょうあなたは、CSSでこれを行うことができると思い

$(function(){ 
    $(window).resize(function(){ 
     $("#container img").each(function(){ 
     if($("#content").width() < $(this).width()) 
     { 
      $(this).width($("#content").width()); 
     } 
     }); 
    }); 
}); 

Answer 2

私が理解しているように、それぞれをラップしたいメインの#content divを基準にしたイメージのネイティブサイズに基づいてサイズが変更されるdiv内のイメージ。

このトリックを行う必要があります。

$(document).ready(function() { 
    var contentWidth = $('#content').width(); 
    $("#container img").each(function(){ 
     var ratio = $(this).width()/contentWidth; 
     $(this).wrap("<div style='width:"+ratio+"'></div>"); 
}); 

あなたはwindow.loadを言及 - $（ドキュメント）.readyをむしろ待っているよりも、それはDOMがロードされた直後に実行されるので、jQueryを使って使用するより良いバージョンですロードするページ上のすべてのリソース（イメージなど）を取得します。