-
Posts
-
Hi,
My customer wants a fullscreen slider with fullscreen images. I uploaded images (format 5184 × 3456). In the settings of the slider all images use alignment bottom-center and no-scaling but parts of the image disappear. For example slider 2 the top of the image (roof of the house) disappears and slider 4 the ceiling of the room disappears.
What is wrong because i thought it is a responsive element so all images are fullscreen no matter what screen size.
THX FreekHey Freek,
Yes, responsive element just means the elements/layout adapts with the device. However as for parts of the images which are cut off, the fullscreen will try to fit the image to the device viewing it depending on their screen size. For example in your site, try to view the link to the image in the Private Content, you will notice that there’s white space on the right, what fullscreen slider is trying to achieve is to expand the width of the image to cover the whole screen however expanding the width to 100% would also mean that the height of the image will also be expanding more than the height of the monitor, therefore the top and bottom part of the image are cut off (height or width is sacrificed just to preserve the ratio of the image). But if you really want it to show all parts of the image, try to add this code in Quick CSS (located in Enfold > General Styling):
.avia-fullscreen-slider .avia-slideshow>ul>li { background-size: 100% 100% !important; }It will show all parts of the image but the ratio will not be preserved. Hope this helps. :)
Best regards,
NikkoIt works but the image ratio is not preserved indeed. Is there no other way to achieve this? I tried with advanced layer slider etc. etc.
Maybe a third-party plugin?
THX for the awesome support.
Freek
- You must be logged in to reply to this topic.