CSS code for matching the long edge of photos in Woocommerce shop pages

[photodoug]

Hello. When displaying my photographs on the product page in WooCommerece within Atelier, the vertical images are significantly larger than the horizontal images, making them look goofy. Can someone please share the CSS code to match the long edge of all photographs on the product pages so they are the same proportionally? I’m referring to the page where multiple photos show, not the product detail page. Thank you in advance.

[Rui Guerreiro – SUPPORT]

Hi,

Can you provide the url of that page so we can have a look?
The image format can only assume one format.

-Rui

[photodoug]

Here you go. Thank you.
http://dougoglesbyphotography.com/product-category/land-sea/page/4/

[Rui Guerreiro – SUPPORT]

Guess the only way is to define a square format(between the 2 current formats) in Woocommerce settings and regenerate all images thumbnails using this plugin.

Regenerate Thumbnails

-Rui

[photodoug]

Thanks but I’m not trying to regen thumbs and I don’t want square thumbs (that will ruin the display of vertical images). The problem is that Atelier has decided vertical images should be sized so that the *short* end is as wide as the horizontal *long* end. In order to keep the original aspect ratio of the image, this results in vertical images being significantly larger on the long end than they should be. What Atelier needs to do (what I want to do) is size the horizontal and vertical images so that the *LONG ENDs* of both are the *same*. That’s the code I’m looking for. I know this can be done. I’ve inspected the code through FireFox firebug (or whatever it’s called) and can see there is a way to do this but I don’t know how. Thank you.

[Kyle – SUPPORT]

Hi

The image sizing in woocommerce functionality, all the theme does it set the width of the image area. I understand what you’re saying, however woocommerce only allows you set set a global image size for the product page images

– Kyle

[photodoug]

Thanks. So you are saying there is no way to do what I’m hoping for?
Seems odd that there’d be a limitation that like.
Could I trouble you to take a look at the following link and let me know why you think the page has one thumbnail format for the first image (Oxbow Sunset) and the other three panoramas are forced cropped to the 3:2 horizontal aspect ratio? That gives me hope I do have the capability to alter the vertical image sizes. But, I’m a neophyte when it comes to this stuff. Thanks!

http://dougoglesbyphotography.com/product-category/panoramas/

[David Martin – Support]

Can you disable the “Protected Content” plugin, we cannot inspect your source code.

The height is relative the width of the uploaded image, the first image would look to be a different initial size then the other three.

Thanks,
David.