Viewing 11 posts - 1 through 11 (of 11 total)
  • Author
    Posts
  • #236561

    Dear friends,

    is there a possibility to always display the entire image in the full screen slider, without cutting off parts of the image?
    I want the images to display completely no matter what width and height of the image. Scaling the browser will in that case show gaps when using images of various height and width, but that is exactly what I want.

    THNX in advance
    Eric

    #236983

    Hey station1!

    Can you post the link to your website so we can take a look? Which version of Enfold are you using? If not 2.6.1, please update it ( see – http://kriesi.at/documentation/enfold/updating-your-theme-files/ ). You can choose to display Transparent header on selected pages with the latest version

    Best regards,
    Yigit

    #237048
    #237052

    By the way, I tried to update but on alle pages a gap appeared at the top of the page.
    I’m using the page setting NO HEADER NO FOOTER.

    #237076
    #237641

    Hey!

    Can you try uploading your image in 1920x1080px?

    Regards,
    Yigit

    #237647

    Hey,

    that would work for landscape images, but most of the images don’t fit, because they are different in size.
    I’ve seen in another theme (but which one?) that the images always tried to fit the max width or the max height.
    In that way images are always displayed complete. As said I don’t mind the gaps that will appear.

    Eric

    #237735

    Hi Yigit,

    I found an example of what I meen. It’s a plugin from Codecanyon.
    Look at this: http://userproplugin.com/gridfx/
    If you click on an image, and resize your browser in both ways up and down, the image will be visible no matter what.
    I want this behavior in the fullscreen slider from enfold.

    Hope you can help me and my client

    Greetings Eric

    #238554

    Hey!

    No, this is currently not possible. You can try to use the lightbox and the “expand” image button to create such an effect.

    Cheers!
    Peter

    #1200797

    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, 3 months ago by thatsmyname.
    #1201074

    Hi Stefan,

    Thanks for sharing your solution, it’s much appreciated :-)

    Best regards,
    Rikard

Viewing 11 posts - 1 through 11 (of 11 total)
  • You must be logged in to reply to this topic.