Question

I am developing an eCommerce shop where on over 100 category pages, the thumbnails are not the same size and/or proportion. I need to center all images with the class Thumbnail within its div. I have already added a relative position to the item as well as a margin to center.

Can someone help me write a quick jquery that will add get the width of each image with the class thumbnail and add it to each img tag?

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

Perhaps something like this is a start. I need to search the document for each image with a certain class, then get the width of each image and add it as css.

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

Answer 1

I can only guess, but as I understand, your Markup looks a like this:

...

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

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

...

if you now want to equalize the thumbnail-width to the parent simply use 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%;
}

the use of jQuery for this need is a waste of performance but you could do it like this:

$(".thumbnail").each(function() {
 $(this).css({
      "width" : $(this).parent().width()+"px"
  });
});