-
Posts
-
I’m thinking about using the accordion slider for a client, but I’m wondering if there’s a way to place larger images in the slider, and then size down the whole slider so the images are more crisp looking when sized down in the slider. In other words, right now, if I choose the Gallery (845×684) image size, the accordion slider is 684px high and the images show at 845×684, which I think looks a little soft on retina and higher resolution screens. What I’d like to do is place the images at that size or larger, but then have the accordion only be maybe 500px high — so the images are placed at a larger size, but sized down to 500px high, so they look a little more crisp. Does that make sense and, if so, would you be able to show me how to do it? Thanks, and lmk if you have any questions.
Hey sky19er,
Thanks for your question, you can limit the size of the container to 500px with this css:#accordion_slider_1 .avia-accordion { max-height: 500px; }but your current images will not be the correct ratio because the width of each image needs to cover the space for the mouse-over.
With your current images you could correct this with this css:#accordion_slider_1 .avia-accordion { max-height: 500px; } #top .aviaccordion-slide img { object-fit: cover; object-position: left bottom; }this allows the image to show the correct ratio, but I don’t believe this is want you want because the resolution is the same.
I believe to achieve what you want you should use images that are double the size you want to show, such as 1000px X 1776px, then when you limit the height to 500px the image will show as 500px X 888px (16:9) and look crisper on retina screens.Best regards,
MikeHi,
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
- The topic ‘size down images in accordion slider for better resolution’ is closed to new replies.