How To Make The Image Carousel Responsive But Keep The Proper Proportions - Question | JoomShaper
Back to the questions

How To Make The Image Carousel Responsive But Keep The Proper Proportions

MH

Matt Hunt

SP Page Builder 11 months ago

How to make the image carousel responsive but keep the proper proportions. I'm having a heck of a time getting the images to look right on different devices. Whats the trick to it?

0
1 Answers
Order by
Oldest Newest Votes
Ziaul Kabir
Ziaul Kabir
Accepted Answer
Support Agent 11 months ago #187324

Hello Matt,

Thank you for reaching out!

To make the image carousel responsive while maintaining proper proportions, try the following approaches:

  1. Use CSS to Maintain Aspect Ratio

You can apply this CSS to ensure images resize properly without distortion:

.sppb-carousel-extended-item img {
    width: 100%;
    object-fit: fill;
    height: 100%;
}

If your images are being cropped, change object-fit: cover; to contain; to fit the entire image.

  1. Ensure Image Sizes Are Consistent

If your images have different aspect ratios, consider resizing them to a uniform size before uploading to prevent layout shifts.

Let me know if this helps or if you need further adjustments!

Best regards,

0