Viewing 23 posts - 1 through 23 (of 23 total)
  • Author
    Posts
  • #1354165

    Dear Team,
    Could you please out all the slide-shows images of my website to see why are they being cut in their upper part ? I tried everything I could think of and found nothing. Are the images too big in size (2400×1600) ?
    Thank you and kind regards,
    HulaSlim

    #1354196

    Hey HulaSlim,
    Thank you for the link to your site, your slider image is using “center center”
    2022-06-04_013.jpg
    try using “top center”
    2022-06-04_014.jpg
    please check
    2022-06-04_015.jpg

    Best regards,
    Mike

    #1354198
    This reply has been marked as private.
    #1354203

    Hi,
    Unfortunately, not with your current image size you would need to change it to 2560 × 1440 (16:9 aspect ratio), you are currently using 2400 × 1600 (3:2 aspect ratio)

    Best regards,
    Mike

    #1354289

    What kind of slider you are using?

    #1354298

    Hi,
    Thanks Guenni007, they are using the avia-fullscreen-slider,
    height: 100vh
    background-size: cover;

    if background-size: contain; is used the image doesn’t fill the width
    here is a copy of the image: https://savvyify.com/img/image/udGp (2400 × 1600)

    Best regards,
    Mike

    #1354313

    @HulaSlim : If something is fixed in height but needs to respond to decreasing widths, then there are only two options. Either the image is distorted or cropped, regardless of the original aspect ratio. That’s exactly what the full-width slider is for – to adjust the height according to the screen width. This is what the word responsive means.

    #1354562
    This reply has been marked as private.
    #1354578

    Hi,
    It depends on your screen size, please see Guenni007 comment above.
    When I look at it, it looks good, perhaps you should use “center center” as I pointed out above to center the bear.

    Best regards,
    Mike

    #1354699

    Hi,
    I did follow your advice: images are centered-centered, so this is not the problem.
    I don’t understand Guenni’s comment. Can you please tell me on which screen size should I set my computer to see it good ?
    Thanks
    HulaSlim

    #1354708

    Try viewing a portrait image on your home TV. If you want this image to be shown without black borders, you only have the option to either crop it – or to keep the image the same in height and stretch it in width. That means you leave the original aspect ratio.
    The full-width slider, on the other hand, keeps the aspect ratio.

    #1354947

    Hi,
    I don’t have a home TV.
    And I wasn’t asking for theory.
    I would like to solve a concrete problem which was exposed in the other messages.
    I need my images to be entire and not cropped. Which are the steps I have to follow to achieve this?
    Thank you.
    Regards,
    HulaSlim

    #1354950

    Hi,
    Unfortunately, it’s going to be cropped at some screen sizes if you want the image to be 100% height & width for all screen sizes.

    Best regards,
    Mike

    #1354956

    Hi Mike,
    I never said I want the image to be 100% for all screen sizes. I don’t even know what that means.
    I only want the slide-show images to be complete when previewing. If you mean I have to choose, then I would like images to be entire on a computer screen. So please tell me finally what I need to do to achieve this.
    Thanks
    HulaSlim

    #1355005

    Hi,
    Thanks for the feedback, I added this css:

    .avia-fullscreen-slider .avia-slideshow>ul>li {
        background-size: 100vw 100vh !important;
        background-repeat: no-repeat !important;
    }

    compared to the actual image (inset) and the slider image doesn’t seem to be cropped, note the ear and the paw are the same:
    2022-06-12_009.jpg
    please clear your browser cache and check.
    If this doesn’t look the same on your desktop please use this link to see your screen resolution and let us know so we can adjust.

    Best regards,
    Mike

    #1355042

    Hi Mike,
    Thank you so much for your setting.
    On my laptop screen the bear’s ear and paw are cropped plus all images look bad (horizontally stretched). Thank you for the link you provided, so I can inform you that my screen resolution is 1280×720. Hope this help to find the right setting.
    Thanks again and best regards,
    HulaSlim

    #1355076

    Hi,
    Thanks for the feedback, when I test at 1280×720 the bear’s ear and paw are the same as the original image in the inset of the screenshot above:
    2022-06-13_001.jpg
    please compare this to the original image linked below, perhaps the image was cropped when you uploaded it, but your image being used had the edge of the ear & paw to the edge of the screen.
    If you uploaded an image with more space away from the ear and paw, try resizing your image to 1280×720 and uploading again.

    Best regards,
    Mike

    #1355146
    This reply has been marked as private.
    #1355155

    Hi,
    It looks like you have changed the image, yesterday the image used was ours-2560-x-1440-1, note the paw:
    2022-06-14_002.jpg
    today the image is ours-2560-x-1440, note the paw:
    2022-06-14_003.jpg
    and today the frontend view matches the new image at 1280×720
    2022-06-14_004.jpg
    So it looks like your image change has corrected, please clear your browser cache and check.

    Best regards,
    Mike

    #1355171

    Hi Mike,
    Yes I changed the image andthe paw and ear are visible. But the resolution is still not coorect. I followed the link you gave me and it said the resolution of my computer is 1280×720. So then you changed something but since then all header images are horizontally extended. Could you please correct the resolution so it is adapted ?
    I made a screenshot to show you, but unfortunately I don’t know how to copy it inside this window.
    Thanks
    Regards,
    HulaSlim

    #1355183

    Hi,
    Please try creating a new image that is 1280×720, if this doesn’t help then try this new image in the full width slider instead or your current full screen slider, the full screen slider is meant to cover the full screen and in doing so the edges will be cropped.
    If we change this to contain to the screen then the image will not be full width unless the image is stretched or the image is the size of the screen, in your case 1280×720.
    When I look at your site I can’t see any difference between the backend media library image:
    2022-06-14_003.jpg
    and the frontend slider view at 1280×720:
    2022-06-14_004.jpg
    Perhaps you should try the full width slider instead as it will set the image height based on it’s ratio and always have full width.
    To add a screenshot please try using an Screenshot service and pasting the image URL in your post.

    Best regards,
    Mike

    #1355266

    Dear Mike,
    You hit the nail on the head. The problem was the full screen slider. It works great also with the big image 256’x1440.
    Thank you very much for solving this problem.
    Kind regards,
    HulaSlim

    #1355270

    Hi,
    Glad we were able to help, if you have any further questions please create a new thread and we will gladly try to help you. Thank you for using Enfold.

    Best regards,
    Mike

Viewing 23 posts - 1 through 23 (of 23 total)
  • The topic ‘Slide show image cut at the edge’ is closed to new replies.