使用jQuery定义和添加图像宽度

Question

我正在开发一个电子商务商店，在超过100个类别页面，缩略图是不相同的大小和/或比例。我需要与类Thumbnail在其div中居中的所有图像。我已经添加了一个相对位置的项目，以及一个空白的中心。

有人能帮我写一个快速的jquery，将添加得到每个图像的宽度与类缩略图，并将其添加到每个img标签?

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

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

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

Answer 1

我只能猜测，但据我所知，您的标记看起来像这样:

...
<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"
  });
}); 

Answer 2

设置父div位置为

position: relative;

，然后设置项

margin : 0 auto;