Hello! Such a question, I have images, I display them in this way http://cash-back.kz/index.php/products/cat/komp_yuternaya_tehnika/date can see these images on the left.

I bring them through the cycle, and there was a need to align all the lines to the same height. Now I take all the images and put them width: 140px, and the height automatically. It turns out that when the height is greater than the width, then the height of the column becomes large as 4 and 5 product by reference.

It is necessary to do so, probably through jquery. If the height is greater than the width, then the change in the image is not width, but height. If the width is greater than the height, then just like the width now.

ps Initially, the images on the server are loaded in different sizes, only when outputting, I set the width and height. Tell me how to implement? Thank you

    1 answer 1

    I do not know how about cross-browser compatibility, but the thing is completely solved through css:

    .example-image-link { display: block; width: 150px; height: 150px; line-height: 150px; text-align: center; } .example-image-link img { vertical-align: middle; width: auto; height: auto; max-width: 140px; max-height: 140px; }