Pourcentage size

Hi @nicolbc

We don’t have an option to set percentages for the sizes, and you should think of the slider sizes as more of an aspect ratio than a fixed size, so on smaller screens it will be smaller, on bigger screens it will be bigger by default, but you could also use the “Boxed” layout:
https://smartslider.helpscoutdocs.com/article/1775-boxed-layout
This makes the slider occupy the area of the container you put the slider in. Then you could change this container as you see it fit, and the slider will cover that area.

As for the image:
It’s based on the “Slide background image fill” option:
https://smartslider.helpscoutdocs.com/article/1809-slider-settings-slides
how your images look like in the slider. By default the “fill” option is used which will make the image as big as it needs to be to cover the whole slider. This means that if the slider and image ratios differ, the image will be cropped. To avoid this behavior you could change the fill mode to “fit” or “blur fit” instead.

hello, thank you for the response.

This seems to work in Safari but in Chrome and Firefox, the images still exceed the height (they don’t fit). I work with Elementor and I have defined a maximum height on my main container. Can you enlighten me on what appears to be a bug?

Hi @nicolbc

You can not make a slider scale based on the height of the container, it scales rather based on its width. So as your container becomes wider, so your slider will be. Here you can learn more about the factors that define the size of your slider:

• https://smartslider.helpscoutdocs.com/article/2033-what-affects-slider-size

For this reason you shouldn’t limit the container’s height as that could make the container smaller than the actual height of the slider, thus the bottom part of the slider would overflow it, and if you also have overflow hidden specified, the slider will be cropped.

On the other hand, what you are trying to achieve is physically not possible, since if I understand correctly you want:

• the slider to be exactly as wide and high as the viewport ( the “Full page” layout of the Pro version could make your slider scale like that, however as per the forum guidelines, on this forum we are no allowed to discuss topics about commercial products such as the Pro version. So if you have presales questions connected to this feature, please contact us directly over the ticket system: https://smartslider3.com/contact-us/presale-questions/ )
• and meanwhile you also want a background image to cover this dynamically sized area without the image being cropped or distorted.

This is not possible since generally speaking if the size of the area ( in this case the slider ) might changes based on the screen width, then you won’t be able to match the aspect ratio of the background image to the aspect ratio of the area, which means your image will be either cropped, distorted or it won’t cover the entire area. In the documentation below you can learn more about the background image fill modes:

• https://smartslider.helpscoutdocs.com/article/1809-slider-settings-slides#slide-background-image-fill

So to sum things up:

• if you want all parts of the background image to be visible, then as Robert mentioned above you will need to use the Fit or Blur fit fill modes.
• and if you want the slider to go both as wide and high as the viewport is, then that is only possible with the Pro version, that we can not support on this forum

Best regards,
Laszlo.

ok, thank you,

i’m looking for the pro version