Before the pagination workaround for sliders, we set up a set of Hero Sliders for our home page. It works ok, but the main issue we have is that the images don’t scale down to the size of the slide to include the entire image.
In CMS articles for example, the whole image is always displayed in the article, regardless of the resolution. They scale to the container they are in.
With the Hero Slides and also our top banners, the images do not scale. Examples below:
I don’t know if there is a way of adjusting the images to automatically fill to the dimensions of the container they are in, regardless of monitor size?
Images have dimensions, so they can take up like 100% of the width of their parent. If their parent has dimensions, this can result in whitespace up and down or left and right.
Background images can be set to contain or cover, they’ll take up all the space of their parents. But they’re no longer images, they can’t have an alt, and they should be used only if they are a decoration, not important, real content. Also they force you to have many classes to set them up (not the case when used withthe CMS)
To have uimages behave like CMS images, you can use custom CSS object-fit property. Check the last demo of this page: http://clipping-masking.webflow.io/
Thanks for the reply - I’m still not sure what the difference is on my existing setup though - On the same monitor, using the same image but in different containers on a different page, one of the containers (the banner on the article) centralises the image. The slider just lets it expand out:
