0

I'm trying to create a e-commerce website using wordpress and woocommerce. The template that i'm using is Zerif-Lite. But i ran into a problem.

I've got a few products image in the woocomerce product page. However not all the image size are the same(some of them are 185x256 but some of them are 200 x 299). Therefore when the image shows up on the site would varies example photo The idea that i'd like to fix it by putting the image inside the container like this photo with the aspect ratio remaining.

I've tried to adjust the image size using the function provide by woo-commerce. But it doesn't change anything. I've try to google for the fix, and ran over some solution liking using thumbnail, but i wounder is there a way to achieve what I've mention above? or am i even heading the right directions?

Again many thanks for the Help :D

Xylops
  • 107
  • 1
  • 1
  • 10
  • Not sure if it will help: https://br.wordpress.org/plugins/manual-image-crop/ You can crop de image the way you want and save it. – Clyff Feb 15 '16 at 18:40

1 Answers1

0

Best way would be to edit the printed div code or style for those images to have something like:

img {
display: block;
max-width:230px;
max-height:95px;
width: auto;
height: auto;
}

This will auto resize, but maintain dimensions. In your case, it seems height would need to be the limiting variable.

This seems like it may be a duplicate of this: CSS force image resize and keep aspect ratio

Community
  • 1
  • 1
Justin C
  • 326
  • 2
  • 13