-3

100 を超えるカテゴリ ページでサムネイルのサイズや比率が異なる e コマース ショップを開発しています。すべての画像を div 内のクラス Thumbnail で中央に配置する必要があります。アイテムに相対的な位置と中央へのマージンを既に追加しました。

クラスのサムネイルを使用して各画像の幅を取得し、それを各 img タグに追加する簡単な jquery を書くのを手伝ってくれる人はいますか?

.thumbnail {
position: relative;
margin: 0 auto;
}

たぶん、このようなものが始まりです。特定のクラスの各画像のドキュメントを検索し、各画像の幅を取得して css として追加する必要があります。

$(document).find(".Thumbnail").css({
width: $(this).width()
});
4

2 に答える 2

0

推測することしかできませんが、私が理解しているように、マークアップは次のようになります。

...

<div class='product'>
  <img src='image.jpg' class='thumbnail' />
</div>

<div class='product'>
  <img src='image2.jpg' class='thumbnail' />
</div>

...

サムネイルの幅を親と同じにしたい場合は、単純に CSS を使用します。

.product {
 margin: 0px;
 width: 200px; // just as an example
 height: 200px; // just as an example
 float: left; // just as an example
 margin: 0px 7px 7px 0px; // just as an example
}

.thumbnail {
 width: 100%;
}

この必要性のためにjQueryを使用するとパフォーマンスが無駄になりますが、次のようにすることができます：

$(".thumbnail").each(function() {
 $(this).css({
      "width" : $(this).parent().width()+"px"
  });
});
于 2013-01-17T21:46:23.563 に答える
0

親divの位置をに設定します

position: relative;

その後、項目を設定します

margin : 0 auto;
于 2013-01-17T21:38:12.540 に答える