I’m trying to make a slider that contains images that will resize to always take up the full width of the browser, BUT after a certain size, as the browser gets bigger, the images do not keep growing. I’m really having trouble because I try assigning 100% width to the mask, or the slider, but the images won’t behave this way no matter what I try. I’ve also tried giving the images 100% width but then the get cropped vertically by the slider (the slider won’t become tall enough to accommodate the image size). I also don’t know how to establish what is the maximum size it can have.
This is a website with the functionality I’m trying to replicate
Hello,
I checked and found the problem.
First of all, give the main parent of the slider and the mask itself a width of 100%, and as shown in this picture, give the images inside the slider a width of 100% and object fit: cover, so that the problem is solved and the image covers the entire width.
@zafremedia thank you so much for the reply. Actually I also wanted the slider to then stretch vertically to fit the height of the image, and I wanted to be able to determine a maximum width (so that if you’re on a display bigger than 16inch, the image does not take the whole width of the viewport, but caps at a certain width). Is that possible?
If you haven’t set a max width for the parent of this slider, naturally, since this slider is inside a section, it will cover the full width of the page on larger sizes as well.
For the height, it’s enough to give the parent a specific height and set the image height to 100%.
I have created a new slider, placed an image on a slide, and given it a width of 100% and a max width of 900px. Now the image will not grow beyond 900px, and it will fit to 100% of the width on anything below. But the image is cropped on the bottom because the slider is not big enough. I don’t want to give the slider a specific height because each image has a different height. How can I make it so the slider grows on height as much as necessary depending on the height of each image. Thanks!
I have figured out a very long way to do it, will leave here in case someone runs into this issue. The Top level container (Slider) has to have a specific size (height), in my case was 60vh. The actual image has the same size (60vh), and all other elements in between (parents/children) are all set to auto size on every parameter. That worked. When resizing a browser window, the image was never cropped and the slider adjusted accordingly (provided that the image fit inside 60vH in the first place, otherwise you’d have to try other sizes).
However, the better solution for me was using CSS and calc. I assigned the slider and image (you may only need to assign it to one of them, but I did both just in case) a class, then i referenced that class on the CSS custom code under Settings (head). I gave it a width: calc (100vh - 200 px) and height: calc (100vw - 10px), and it works great. I substract pixels because I want a margin for other elements. If you wanted full screen then avoid that.
