スケーリングされたイメージの幅に基づいてオンザフライでdivの幅を設定する方法

Question

イメージを囲むdivの幅をページの下に調整して、テキストがそのように折り返されるようにしたい画像の幅を超えるようにします。親指の幅は、親指から親指まで変化します。下のコードでは、未知の幅を「???」で識別しました。

<div id="N-03-item" style="float:left; width: ???;"> 
    <p><a href="item.php?i=8"> 
    <img id="N-03" src="photos/thumbs/8.jpg" alt='Choker Necklace 18"'/><br/> 
    Frosted Flower Choker Necklace 18"</a></p> 
</div> 

私は、これは（CSSのソリューションにも良いでしょうが）ジャバスクリプトで発生する必要がある何かであると推定が、JavaScriptは私の強さではありません。結果のdiv幅は、DOMがイメージの幅を各インスタンスに報告する内容に基づいて、毎回異なる必要があります。

誰かが適切なjavascriptを教えてもらえますか？

Answer 1

あなたはそれはのようなものにwoould jQueryを使用することができた場合：

$("#N-03-item").css({ 
    "width": $("#N-03").width() 
}); 

Answer 2

OK、あなたはこのためにJavaScriptを使用する必要はありません。私はjQueryを使ってそれをやった今

OK、@sanitycheck：このフィドルにhttp://jsfiddle.net/jeykeu/WCHcP/2/

UPDATEをご確認ください。私はそれがこれらの仮定に基づいて

Answer 3

を助ける願っていますフィドルhttp://jsfiddle.net/jeykeu/2dBJa/2をチェックアウト：

• あなたは、サーバーのコードを含むDIVの上にその幅を画像の幅にアクセスし、設定することができません
• 解決策は、絶対位置を使用し、流れの外にテキストがかかるためあなたは、行の折り返しのための十分なスペースを確保することができるでしょう

私がしようとするだろう：

#N-03-item { 
    position : relative; 
} 

/* if you can add a class for items, in addition to ID (e.g. N-03-item) than use a 
    rule such as 

.item { 
    position :relative 
} 

*/ 

.description{ 
     position : absolute; 
} 

説明は絶対配置されていますが、上または左が指定されていません。 ほとんどのユーザーエージェントは、にはがあるはずの.description要素を配置しようとします。これにより、説明の幅が項目DIVの幅によって制限されます（それ自体は、左に浮かぶので画像の幅に収まるように縮小されます）。

まだアイテムの下に十分なスペースを確保しておく必要があると思います。それに続くアイテムがある場合、テキストはフローから取り除かれます。

例：http://jsfiddle.net/5FJvd/

Answer 4

はここで完全な作業例です。画像の読み込みが終了すると、DIVの幅が調整されます。早い段階でdomreadyイベントになる可能性があります。 document.onloadが起動するまで待つ必要はありません。私はあなたのマークアップを少し改善し、BRタグを取り除いた。

CSS

.link-thumb { float: left; border: 1px solid gold; position: relative; } 
.link-thumb img { display: block; } 
.desc { position: absolute; } 

HTML

<div class="link-thumb" id="id"> 
    <a href="#"> 
     <img class="thumb" id="id" src="http://placekitten.com/100/100" alt="foo" width="100" height="100" /> 
     <span class="desc">Frosted Flower Choker Necklace 18"</span> 
    </a> 
</div> 

JS

$('.thumb').on('load', function() { 
    var $this = $(this); 
    $this.parents('.link-thumb').width($this.width()); 
}); 

あなたは.bind方法で.on方法を代用1.7以上のjQueryを使用していない場合（JSFiddleを参照してください）！

編集：私はdaveのCSS専用ソリューションを取り入れました。したがって、このスクリプトはIE7以上で実行する必要があります。ただし、ユースケースによっては.descがフローの一部ではないため、固定高さを.link-thumbに設定する必要があります。