Avoid pictures with different heights

Hi,

There is possible in any way to avoid to have pictures on different sizes ?
There is an option from the theme to make them at the same height ?

https://prnt.sc/l2opjz

Thanks

Hi,

Our theme doesn’t manage product images sizes. You can configure them and enable hard crop in Appearance -> Customize -> WooCommerce -> Product images.

Regards

Hi there,

Thank you for your answer, seems to be a solution but not the perfect one.
Ok, so I find a solution in order to solve this in a better way, beautiful way without crop de images.

We have to change a little the code of the listing page of the products like this:

<div id="images">
    <div class="image" style="background-image: url(https://jekyllcodex.org/uploads/grumpycat.jpg);"><div></div></div>
    <div class="image" style="background-image: url(https://jekyllcodex.org/uploads/grumpycat2.jpg);"><div></div></div>
    <div class="image" style="background-image: url(https://jekyllcodex.org/uploads/grumpycat.jpg);"><div></div></div>
    <div class="image" style="background-image: url(https://jekyllcodex.org/uploads/grumpycat2.jpg);"><div></div></div>
    <div class="image" style="background-image: url(https://jekyllcodex.org/uploads/grumpycat.jpg);"><div></div></div>
    <div class="image" style="background-image: url(https://jekyllcodex.org/uploads/grumpycat2.jpg);"><div></div></div>
    <div class="image" style="background-image: url(https://jekyllcodex.org/uploads/grumpycat.jpg);"><div></div></div>
    <div class="image" style="background-image: url(https://jekyllcodex.org/uploads/grumpycat2.jpg);"><div></div></div>
    <div class="image" style="background-image: url(https://jekyllcodex.org/uploads/grumpycat.jpg);"><div></div></div>
    <div class="image" style="background-image: url(https://jekyllcodex.org/uploads/grumpycat2.jpg);"><div></div></div>
</div>

and the css like this:

#images .image {
width: 350px; 
max-width: calc(50% - 5px);
float: left;
margin: 0 5px 5px 0;
display: inline-block; 
background-color: black;
background-position: center center;
background-size: contain;
background-repeat: no-repeat;
}
#images .image div {padding-top: 100%;}

Can you help me with this ?
Thanks

Sorry, but don’t provide additional customization help. It requires WooCommerce files customization and it is our of our support scope.

I understand, no problem. Thanks

If you have any questions please feel free to contact us.

Best Regards

[Author]

Posts