Image Carousel

  1. the entire artwork visible
  2. no cropping
  3. 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.

2 Likes

Hi there and welcome to the Community, @Gloria_Martin :waving_hand:

The only solution here is to use the CSS code below:

.eapp-photo-gallery-item-data-image {
  object-fit: contain
}

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 :wink:

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.

1 Like

I understand what you mean. After adding the code, the images seem to keep their original aspect ratio (with different height)

While it might seem like the photo cards are different heights, they’re actually the same. The aligned text under the images confirms this.

Original ratio (without a CSS code)
The text is misaligned because each card has a different height:

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 :slightly_smiling_face:

P.S. I’ve also noticed that your images are currently over 1MB, which slows down the widget loading speed:

To help the widget load faster, we recommend using these tools to reduce the image size:

Once you’ve compressed and re-uploaded the images, you should see an improvement :slightly_smiling_face:

Thank you so much.

1 Like

You’re very welcome!

In the meantime, we’d like to invite you to participate in our new contest, where you can win a 3-month extension for your subscription - March Contest: Create a Dating Profile for Elfsight Widget and Win 3 Months FREE! :wrapped_gift:

Check the details and join in :wink:

1 Like