Full screen slider always display the complete image

Since i stumbled over this thread while searching for the same functionality, i will leave my solution here. Not sure, wether there might be an even easier solution, since it is 2020 already and the post is 6 years old. At least this works for me:

Request:
“is there a possibility to always display the entire image in the full screen slider, without cutting off parts of the image?”

Solution:
add a custom css name to your fullscreen slider element, e.g. “custom_fs_slider” (under edit > advanced > developer settings > custom css class).

Add this code to quick css:

.custom_fs_slider .avia-slideshow > ul > li {
    background-size: contain !important; /* resizes the background image to the size, where it fills the container in one direction, but without cropping the image on the other direction. aspect ratio is being maintained */
    background-repeat: no-repeat !important; /* makes sure, that only one instance of the picture is visible */
    /* general note: this makes most sense, when the background color of your picture is either transparent or has the same color of the background, so that you do not see borders of the background image */
}

Hope this helps someone. Cheers, Stefan

• This reply was modified 4 years, 8 months ago by thatsmyname.