-
AuthorPosts
-
June 4, 2022 at 6:49 pm #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,
HulaSlimJune 4, 2022 at 11:39 pm #1354196June 5, 2022 at 12:07 am #1354198This reply has been marked as private.June 5, 2022 at 12:59 am #1354203Hi,
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,
MikeJune 6, 2022 at 11:47 am #1354289What kind of slider you are using?
June 6, 2022 at 1:09 pm #1354298Hi,
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,
MikeJune 6, 2022 at 5:39 pm #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.
June 8, 2022 at 9:18 pm #1354562This reply has been marked as private.June 9, 2022 at 3:52 am #1354578Hi,
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,
MikeJune 9, 2022 at 6:21 pm #1354699Hi,
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
HulaSlimJune 9, 2022 at 7:28 pm #1354708Try 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.June 11, 2022 at 11:26 pm #1354947Hi,
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,
HulaSlimJune 12, 2022 at 12:24 am #1354950Hi,
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,
MikeJune 12, 2022 at 8:49 am #1354956Hi 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
HulaSlimJune 12, 2022 at 11:55 pm #1355005Hi,
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:
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,
MikeJune 13, 2022 at 2:18 pm #1355042Hi 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,
HulaSlimJune 13, 2022 at 5:49 pm #1355076Hi,
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:
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,
MikeJune 14, 2022 at 11:52 am #1355146This reply has been marked as private.June 14, 2022 at 12:29 pm #1355155Hi,
It looks like you have changed the image, yesterday the image used was ours-2560-x-1440-1, note the paw:
today the image is ours-2560-x-1440, note the paw:
and today the frontend view matches the new image at 1280×720
So it looks like your image change has corrected, please clear your browser cache and check.Best regards,
MikeJune 14, 2022 at 1:14 pm #1355171Hi 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,
HulaSlimJune 14, 2022 at 1:56 pm #1355183Hi,
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:
and the frontend slider view at 1280×720:
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,
MikeJune 15, 2022 at 12:36 am #1355266Dear 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,
HulaSlimJune 15, 2022 at 12:55 am #1355270Hi,
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 -
AuthorPosts
- The topic ‘Slide show image cut at the edge’ is closed to new replies.