Image max height and shadow problem

[Avasseur88]

I am trying to have the same heigth for all images on this page : https://wp147723.wpdns.ca/catalogue/jeunesse/

On the first image on the left, I added a max-height and set Object fit as contain but then the shadow does not apply to the image only, a white space is created.

How can I remove this white space, or is there any other way to have all images with the same height and still have a fitting shadow.

Thank you

[ruenel]

Hello Aurelie,

Thanks for writing in! Please set your Object Fit to “Cover” and then the maximum height will be at least 360 pixels.

Kindly let us know how it goes.

[Avasseur88]

360px is too big for what I need. Is there another way ?

[tristup]

Hi Aurelie,

As per the aspect ratio, 360px is the correct value for the Maximum Height. I would suggest you check by removing the max-height.

Thanks

[Avasseur88]

I need a 180px max-height and a shadow applied only to the image. How can I do that ?

[tristup]

Hi Aurelie,

In that case, you need to set the object-fit to cover and set a little darker color or higher opacity for the shadow color.

Hope it helps.
Thanks

[Avasseur88]

I need the image to keep its proportions, which is not the case with object-fit cover. The shadow color is ok, but a blank space is created when I use object-fit contain.

I need : max-height = 180px, keep image proportions, shadow adjusted to image (instead of container)

Please check again this page : https://wp147723.wpdns.ca/catalogue/jeunesse/

The image size on the left is EXACTLY what I need, but I want the shadow adjusted to it.

[tristup]

Hi Aurelie,

I have investigated your website further and found that you need to set the image width to auto by using the following custom CSS code. You need to add the following CSS code in the Customize > Element CSS of the Image element.

$el.x-image img
{
    width: auto;
}

Please remember that the above code will work if copied as it is and doesn’t conflict with any existing style.
Please note that the code provided serves only as a guide to help you get started custom coding on your own if there’s no option offered in our theme or the products we bundle.
We really do not provide support for custom codes which means we can’t fix it in case it conflicts with something on your site nor will we enhance it.

Thanks

[Avasseur88]

Works well, thanks !

[prakash_s]

You are most welcome Aurelie.