-
Posts
-
I have the following setting in a LayerSlider:
Slider Width: 100%
Slider Height: 650
Responsive: ON
Max-width: (empty)
Full-Width: ON
Responsive under: 1290
Layers container: 1290And I asked my customer to upload their banner image in 1290 x 650 px
Question:
it works fine when the browser width is 1290px or below. I can see the slider image in full-width without cut-off or whitespace. However, when the browser is larger than 1290px, the slider image start to cut-off. I tried to set the Max-width to 1290 as well. The image won’t cut-off after that, but it is not in full width in large screen. How can I fix this problem? I want a full-width banner without cut-off in any screen.I updated the slide 4 image to a wider images (1920 x 650px) to make it “looks” fixed for my customer first. I still need the solution for this.
Hi!
I tried viewing it on 1600px width screen and higher but it looks fine to me. Take a screenshot and highlight what your seeing so we can get a better idea.
Cheers!
ElliottThis should because I replaced the image to 1920px. So, it “looks” fixed. But I set the slider width to 1290, adding a 1290px image should work as well but it is not. See the attached link for screenshot and I made a test page and slider for showing this problem.
Hi!
The layer slider automatically calculate the width and height of the background image based on the slide container to keep its aspect ratio. You will sometimes see parts of the image getting cut off because of this. It works like the css background-size: cover; property. Unfortunately, it will take a major customization if we are going to modify the script. As a workaround, you can add the image as a layer instead of background then set the width and height to 100%. This will contain the image inside the slider but you might see distorted images.
Best regards,
Ismael
- You must be logged in to reply to this topic.