[patroblesParticipant]

Hi,
I have read through this thread https://community.theme.co//forums/topic/woocommerce-product-image-settings/ and found this code, which help me set the size of all my image containers in my woocommerce shop.

.entry-product .entry-featured {
  height: 200px;
}

Problem is some images are bigger or smaller than the container and they’re not being adjusted accordingly. Having all images be uploaded in the same size is not a viable solution to my client, so what I want to do is resize them in such a way so that they dont loose their width:height ratio. I tried adding the following CSS, which should theoretically work (I have made it work on simple html created divs)

#top .entry-product .entry-featured img{
  width: 100%;
	max-height:100%;
}

I checked with dev tools and the code is being implemented, however the images are not being resized. The only explanation I can think of is that, while the images are being told to be resized, they’re not recognizing the size of their container.

How could I make it so all the .entry-product and .entry-featured containers remain 200px tall (already done this) and have images being rescaled insided this container without loosing their width:height ratios?

Here’s the link to my shop http://104.156.237.188/~mamachanguito/wp/tienda

Thanks for all the help!

[patroblesParticipant]

Got it to work. I’ll add the code I used in case someone is looking for a similar solution.

This was all placed in the style.css file of my child theme.

To set the size of the product container I use the following code. You can change 200px to whatever height you require. I tried playing with widths as well but it seemed better to do this with the # of columns setting in the costumizer.

.entry-product .entry-featured {
  height: 200px;
position:relative;
}

The position:relative; line was set so I could vertically center pictures that were smaller than the container.
To then scale my images to the container size I used the following code.

#top .entry-product .entry-featured a img{
  max-height:100%;
object-fit:contain;
position:absolute;
   top: 0;  
    bottom: 0;  
    left: 0;  
    right: 0;  
    margin: auto;  
}

Only the first two lines are required to scale the content. The position:absolute; and following code was what I used to center (horizontally and vertically) all the images that weren’t being resized because they were smaller than my content.

I hope this can save someone else the headache it caused me!

Cheers!

[RupokMember]

Hi There,

Glad that you figured it out and thanks for sharing with the community. We really appreciate your effort.

Cheers!

[Nicolas ZParticipant]

Hi Patrobles,

Thanks for this solution !

Have a nice evening,

Best regards.

[NicoModerator]

Really glad it helped you.

Have a great day! 🙂

[Author]

Posts