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 9 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 9 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