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
You 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;
}Hello 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.
https://prnt.sc/Iy5a6DWudmW6
Best regards
Hi
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
Just checking in to see if you have feedback on the provided solution. If the answer resolved your query, you can mark it as accepted to close the post and guide others with similar questions. You’ll find a button to accept answers below each comment.
If you need further assistance, feel free to let us know!