2010-11-24 15 views
0

ズームインとズームアウトが可能なサムネイルのリストを表示しています。各サムネイルの上に、ユーザーが選択できるテキストを配置する必要があります(これはjQuery UI Selectableを使用しています)。CSS:画像のサイズに合わせて画像にdivボックスを作成する

ここで私は(http://jsfiddle.net/jEkaa/2/上の完全なコード)持っているもの:画像サイズの変更は、私は同じ相対位置でのdivボックスを保つために何をすべきかが必要です

<ul> 
    <li class="selectable"> 
     <a href=""> 
      <img src="http://placehold.it/400x400" width="400" height="400"></img> 
     </a> 
     <div style="position: absolute; width: 3.93em; height: 1.86em; border-style: solid; border-width: 1px; left: 6.81em; top: 11.57em;">400</div> 
     <div style="position: absolute; width: 1.13em; height: 1.86em; border-style: solid; border-width: 1px; left: 11.57em; top: 11.57em;">x</div> 
     <div style="position: absolute; width: 3.93em; height: 1.86em; border-style: solid; border-width: 1px; left: 13.43em; top: 11.57em;">400</div> 
    </li> 
<ul> 

とき(jQueryのようにUI Selectableはまだ動作します)?相対的な測定値を指定する画像とdivの周りにコンテナが必要ですか?

既存のアプリケーションにdivを追加します。したがって、divの配置は石で設定されていません。おそらく彼らはアンカータグに入るべきでしょうか?

+0

をあなた自身の ''を追加する必要はありません。左のメニューから選択するだけです。私はまた、イメージのサイズ変更を見ていないよ、あなたは模型にそれを含めましたか? – david

+0

@david、@StackOverflowNewbie、[サイドバーにHTMLリンク/スクリプトを削除したデモ版](http://jsfiddle.net/davidThomas/jEkaa/3/)。また、私はイメージを見ていないよ。 **は画像サイズ変更に基づいてあなたにアドバイスするのは難しいです**。 –

+0

@david、jsFiddleのチップに感謝します。いいえ、私はズーム機能を追加していません。実際のアプリケーションでは、Ajaxによって行われます。イメージソースが置き換えられ、高さと幅の値が更新されます。 – StackOverflowNewbie

答えて

2

テキストラベルの割合を使用して位置とサイズに喜んでいる場合は、単にコンテナのdivを追加し、そこに画像のサイズを調整するとき、それはサイズです調整することができます。jsFiddleあなたに

http://jsfiddle.net/ym4gE/4/

関連する問題