Hi. I want my images to behave like in this video.
Can´t seem to find a way to do it.
What you see in the video aren’t images but background images. There are many differences from one to another.
Images
- are defined in the HTML code
- are an element in your page: they mean something semantically, they’re indispensable in the context of the content
- have dimensions or default dimensions who can affect the dimensions of their parents
- they can have an ALT text that is describing what they represent, ensuring that your content is accessible for visual impaired and people who are navigating on devices that don’t render images
Background images
- are defined in the CSS
- have a purpose of decoration, not content
- are not an element of the page, they’re not indispensable in the context of the content
- have dimensions but those dimensions don’t affect the dimensions of their parents element
- they can’t have an ALT description, they can’t be described in an accessible way
So if you want to fill a square div with an image, you have two solutions. You need to ask yourself “Is the image completely indispensable in the context of the content or is it only a decoration, an illustration?”
If the answer is: “No, they’re just decoration” then add images as background images inside of the div. Give the div the dimensions you want and set the options of the background image to fill the div or to be shown entirely. Set the repeating options too.
If the answer is: “Yes, the images should be a part of the content and never be dissociated from it” then you should refrain using them as background image. However you can use CSS code to make them fit to the dimensions and ratio of their parent element (a complicated way to say “you can crop them to their parents size”). Read below.
Constraint an image inside of an element using CSS object-fit
I made a page explaining various techniques of clipping, masking and fitting images and elements. Check the last section about fitting.
To use fitting with Webflow, you’ll have to use custom code. Here it is:
.fit { object-fit: cover; }
Here are all the values you can affect to the object-fit property:
- fill - This is default. The replaced content is sized to fill the element’s content box. If necessary, the object will be stretched or squished to fit
- contain - The replaced content is scaled to maintain its aspect ratio while fitting within the element’s content box
- cover - The replaced content is sized to maintain its aspect ratio while filling the element’s entire content box. The object will be clipped to fit
- none - The replaced content is not resized
- scale-down - The content is sized as if none or contain were specified (would result in a smaller concrete object size)
You will see a lot, lot of people using background images when they should really use images, because it’s convenient and because Webflow has great options for it, where it doesn’t support fitting options at all. But it’s wrong, it’s a bad practice, a really bad one. It’s semantically wrong and an anti-accessibility practice.
6 Likes
Vincent, thank you so much for the response. Turns out i ended up using background images to do that. What got me confused was that in the video the blocks appear with the same class name in the elements list, but i guess they used a combo class to change image from block to block.
Thanks a lot!
pls mark @vincent answer as solution (great answer) for future searches about this topic. Thanks!
Agreed, this and many other answers before it - thanks @vincent