.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!

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!

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

Cheers!

Thanks for this solution !

Have a nice evening,

Best regards.

Have a great day! 🙂