Slideshow Aspect Ratio
CCT
Hi all I have a slidehow on my homepage with the image size approx 1920ps wide by 600px high (approx. 3:1) on laptop view. When I go to mobile view it will remain at 600 high but only show the centre part of the image to the width of the screen, I guess like cropping it.
I would like to keep the aspect ratio of the image, so on mobile if screen width is 950px then the height will be approx 300px (approx. 3:1) and still show the whole image.
What setting do I need to do this?
Thanks CT
Ofi Khan
Accepted AnswerHello CCT,
Thank you for reaching out to our technical support forum. I’m sorry to hear about the trouble you’re experiencing.
Please set Custom Height for slider height and set different heights for different screens. You have to adjust to fit your image properly.
Best regards
CCT
Accepted AnswerHi Thanks for your reply. I understand but it's not a great solution as all devices have different resolutions so it would need to auto adjust.
Is there any responsive solutions or different ways to do this? Perhaps the Slideshow addon is not the correct thing to use, maybe there is a better addon?
Thanks Colin
Ofi Khan
Accepted AnswerYou are welcome 😊
There is no good solution if your images aspect ratio is different. However, you can this CSS to target all slideshow images.
.sp-slider .sp-item .sp-background {
width: 100%;
/* Fixed height relative to viewport. Adjust the height according to your need. */
height: 100vh;
/* Crop image edges but keep proportions or you can use object-fit: contain to show full image without cropping. */
object-fit: cover;
display: block;
}