Hi
Background images on divs seem to be a bad idea for accessibility and SEO. What are alternative methods people use with images to get a “Cover” effect for an image. object-fit: ? Maybe flex?
https://stackoverflow.com/questions/11757537/css-image-size-how-to-fill-not-stretch
Here is my site Read-Only: LINK
(how to share your site Read-Only link)
Yes. In short, everything important in HTML should be well accessible and described. A background is meant for graphic design purposes only. It’s of secondary importance. So when you image is a real illustration of your purpose, it can’t be treated as a bg nor no have an alt text.
You can use the CSS object-fit property. Add a fitclass to your image, for example, and define as follow:
.fit { width: 100px;
height: 100px;
object-fit: cover; }
It will behave like cover for bg.
Define the fit class in a block of custom code inside your page, and add the fit class to any image you need to crop.
Other options for object-fit: CSS object-fit Property
I added this technique to my list of clipping, masking and constraining techniques http://clipping-masking.webflow.io/
Hi Vincent,
I wonder if you can kindly help. I’m new to the Wf scene and I’m trying to work out this Object Fit. I came across your link with some great tips. However I can’t seem to get it right!
So I have 300px x 300px div square and an image inside. I would like to have the ‘cover’ look within the box (see screen shot). Do I go to the Page Setting and drop in the custom code there: Custom Code Inside tag
I notice nothing happens to the image thereafter. Your help would be much appreciated. Thanks! C
Object%20fit%20example|690x320
First, this:
Custom code: at site level (in site’s Settings, Custom Code tab), at page level, or in the page itself inside of a custom code Embed component?
The obvious: at page level it will affect the page, at site level it will affect all pages.
The not so obvious: using an Embed component inside of the page, the CSS code will be interpreted and its results shown inside of the Designer (not even a Preview required): the most convenient to design.
Javascript: JS code will never be interpreted on the Designer side, you’ll always need to publish to see the effects.
The trick: To add CSS code that you’ll see the effect right in the Designer, on every page, put the code in an Embed component, then place the component inside of a Symbol that you’ll place on every page (such as the Navbar or the footer).
Now for your object fit:
Drag an Embed component inside of the page, add the following code:
<script>
.img-fit { object-fit: cover; width:100%; height:100% }
</script>
Now you can add the .im-gfit class on any image, as a class or combo class, and they’ll fit inside of their parent as desired.
Some divs of various dimensions and ratios:
Image placed inside of them:
Now we’re adding the class .img-fit to the images:
Other values for this property are:
Hi Vincent,
Thank you for the feedback. Much appreciated!
Coming from a print design background we deal with a lot of images…we can of course crop them, expand, shrink them etc whilst keeping the aspect ratio. I see there are certain ways to do the same in Webflow as seen in your interesting post, http://clipping-masking.webflow.io/
I wonder is it a done thing for web designers to prepare all their images to near/exact image sizes at an early stage so they can easily drop them into an image box, div, background etc in Webflow? That way one has the desired look…save time having to tweak them in Webflow? I imagine this is where the likes of Figma, Adobe XD, Sketch probably come in near the start of the design process to help determine the image sizes before producing the real design in Webflow?
Thanks
Connor
Hi Vincent
I tried to add the code to the site for the first image but for some reason, it doesn’t appear to be covering the div. I also tried adding the code to css (instead of using a code embed) too but it still doesn’t seem to be working. Any suggestions on what I’m doing wrong?
