Resizing images to all be the same size

[RevealHM]

How can I make all of these images the same size without breaking the aspect ratio? (Is there a way to do it in pro without cropping them to be the same size beforehand?) When I adjust the height the image loses its aspect ratio and becomes distorted.

These images all need to be the same size. I obviously can’t crop theme as they are logos.

Test page - Reveal Hair & Makeup

These images I want to be the same size too, but I can crop them to make them the same size.

blog favorite half up hairstyles - Reveal Hair & Makeup

Thank you,
Ashley

[ruenel]

Hello Ashley,

Thank you for the very detailed post information. To get the images on the same height, you need to set the Overflow of each column to be “Hidden” and then set the Maximum Height to the desired image height.

Kindly check out the example page in the secure note.

[RevealHM]

Thank you Ruenel, however, that method is still changing the aspect ratio of the photo and distorting it. As you can see in this example, her arm looks wider in screenshot 2 because that height adjust is squishing the photo instead of cropping it.

Is there a way to resize the photos without distorting the photo / maintaining the aspect ratio? I know that would require cropping the image and that is okay.

[tristup]

Hi Ashley,

I have set the specific height as suggested by my colleague to 380px and now the image looks in the same size. I would suggest you do the same for other images which are not the same size.

Hope it helps.
Thanks

[RevealHM]

Hello.

I’m not sure which photo you are talking about. When I adjust this photo to 380 px for the height and max height, it still distorts the photo. It is squishing the photo to fit instead of cropping the photo.

How can I crop the photo to match the size of the other photo and not distort the photo?

Thank you.

[tristup]

Hi Ashley,

I went ahead and added the following custom CSS code into the Element CSS of the specific image and it looks like 100% in height.

$el.x-image, $el.x-image img
{
    height:100%;
}

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 that means we can’t fix it in case it conflicts with something on your site nor will we enhance it.

NOTE: The WordPress shows and resizes the images based on its aspect ratio, the images are not in 100% height need to be replaced with the images with proper aspect ratio or directly in the specific sizes. Adding custom CSS may distort the image.

Thanks

[RevealHM]

Got it. Thank you for your help!

[ruenel]

You are most welcome, Ashley!