-3

我正在开发一家电子商务商店，其中在 100 多个类别页面上，缩略图的大小和/或比例不同。我需要在其 div 中使用类 Thumbnail 将所有图像居中。我已经为项目添加了一个相对位置以及中心的边距。

有人可以帮我写一个快速的jquery，它将使用类缩略图添加获取每个图像的宽度并将其添加到每个img标签？

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

也许这样的事情是一个开始。我需要在文档中搜索具有特定类的每个图像，然后获取每个图像的宽度并将其添加为 css。

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

2 回答 2

0

将父 div 位置设置为

position: relative;

然后设置项目

margin : 0 auto;
于 2013-01-17T21:38:12.540 回答
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 回答