equal heights with possible empty space around some images
Instead of using the custom image ratios, it would be nice to have a carousel that displays that auto loads the entire image, without cropping, with keeping the same height for each image.
This code will fix the cropping issue and the photo cards will have the same height, while photos with a smaller height will have a white background at the bottom and at the top.
I’ve also noticed that you’re using CSS codes for a different widget (Slider) in your Photo Gallery. Please remove them to make the code above work fine
Thank you. Much appreciated. Is there something else I need to troubleshoot because the code is not working to produce the look that I want. The images returned to their original upload status, All heights and width are are different. I just want a uniform look, no cropping, heights the same for every image. Width’s vary based on the image size.
2:3 ratio (with CSS added):
The cards look more uniform now, and the text is aligned, as all the cards are the same height. The extra space is filled with the white background:
Unfortunately, there is no way to stretch the images to completely fill the container instead of the white background. So, this is the only option for now
I hope this explains things.
If you have any questions left or any assistance is needed, we’re always here to help
P.S. I’ve also noticed that your images are currently over 1MB, which slows down the widget loading speed: