Hi,
I am trying to figure out why my autoplay progress slider images are getting cropped when in full width. I tried to increase the height of the div to make room for the full hight of the image but it didn’t seem to help anything. Please advise.
Hello @Torah541,
Thanks for writing in!
The images that you have used as a background image in each of the slides do not have the same dimensions. be advised that since you have added the images as a background, it will try to cover the whole DIV area. This is why it looks cropped or a little bit zoomed in.
I would like you to try this demo here: https://davidwalsh.name/demo/background-size.html which would explain how the background image works.
We use the
background-image: cover;which would cover the whole area of the container. This is responsive enough which will always cover the whole area. The only thing to consider here is that if your image size is smaller, it will be stretched out, and if you have a bigger image, it will get cut off.
Yes we can use
background-size: 100% 100%;which is also responsive but your image will either be stretched out or get squeezed depending on the size of the container.
Yes we can also use
background-size: 100% auto;but then as soon as you resize your browser or on smaller screen sizes, you will probably have white spaces around the image.
Or we can also use
background-size: contain;but then this is not a good choice because you will see white spaces around your image.
Hope this helps.
I used background image to work around different sized images. It looks like we are going to need to ensure all images are the same size and insert them as regular images.
Hey @Torah541,
Yes, you will need to use regular images if you want specific dimensions per screen size. You can use the Hide During Breakpoints feature to show elements per screen size.
Hope that helps.
1 Like
Is there any way to bulk add 43 images? Or do I need to duplicate a slide 43 times and manually instert the images.
Hi @Torah541,
Unfortunately, there is no way to add the 43 images at a time and you need to add them one by one.
Thanks
How do i adust image dimensions per screen size. Images are getting cropped badly on small screens,
Hi @Torah541,
I would request you follow the suggestion given by my colleague if you want specific dimensions per screen size.
Hope it helps.
Thanks
Why do I need to hide the slider on smaller screen sizes, why doesn’t the slider automatically respond to smaller screen sizes by shrinking the content proportionally? Or does it?
Hi @Torah541,
There is an option for specifying the number of the slide to be shown in different screen sizes, and in that way slide can be adjusted on the smaller screen. I would suggest you use the option and check if that helps.
Hope it helps.
Thanks
This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.