0

私のサイトのすべての画像は div にラップされているため、それらの上に画像のホバー効果用のマスクを追加できます。ここで、画像の幅を周囲の div に追加する必要があります。

それは私のHTMLです：

<div class="imagecontainer">
  <a href="/abc.php">
    <div class="imagebackicon"></div> <!-- ignore, its only for the image mask -->
    <div class="imagebackground"></div> <!-- ignore, its only for the image mask -->
    <img src="image.jpg" width="300" height="200" />
  </a>
</div>

「300」の画像幅を周囲のdivに追加したい。私はこれを行うことでこれを達成します:

$('.imagecontainer').width($(".imagecontainer").find('img').attr("width"));

問題は、このコードが最初の画像の幅を周囲のすべての画像 div に追加することです。すべての画像が同じサイズである限り、これは問題ありませんが、そうではありません。

すべての画像 div ではなく、周囲の div にのみ画像幅を追加する方法を誰かが知っていれば、それは素晴らしいことです。

4

2 に答える 2

1

すべてのイメージ/コンテナーに対してこれを行うには、反復する必要があります。

$('img').each(function(i, elem) {
    $(elem).closest('.imagecontainer').width($(elem).attr('width'));
});

またはその逆：

$('.imagecontainer').each(function(i, elem) {
    $(this).width( $(this).find('img').attr('width') );
});
于 2013-01-25T09:29:30.320 に答える
0

div別のアプローチは、対応する値の配列を使用して、最初にコンテナに幅を適用し、次のように設定imgすることです。width:100%;

JS:

var img = [100,300,200,600]; 
$(".imagecontainer").each(function(i){
$(this).width(img[i]);
});

(div がループを使用してサーバー側で動的に生成される場合は、代わりにインライン スタイルを使用して、サーバーから受信した HTML にコンテナーの幅を設定することを検討してください)

CSS:

img {
    width:100%;
}
于 2013-01-25T09:46:32.827 に答える