Streaming live at 10am (PST)

Image cover in div using CSS or code embed not working

Hi everyone

I have been trying to add the CSS code (object-fit: cover) to my site so that the images are “framed” by their div, however, after trying to apply it as a code embed or as a CSS in the site code doesn’t appear to be working. The desired effect that I wish to create is so that the image fills the div so that it can be cropped responsively for mobile like a background image would.

Any suggestions on what I’m doing wrong or why it isn’t working?

The css code I am using for the image (Class: img-fit)
.img-fit { object-fit: cover; width:100%; height:100% }


https://preview.webflow.com/preview/theintuitionjournal?utm_medium=preview_link&utm_source=designer&utm_content=theintuitionjournal&preview=836e9f931320382c8093187253367fb6&pageId=5da80b2f990d0a95061614c4&mode=preview

Hi @jochunyan

Does any of the default options (custom / cover / contain) to control how the image fills your DIV works for you?

I’m trying to understand why do you need to add custom CSS to achieve this effect.

Probably for SEO reasons?

1 Like

I can achieve this if I make the image a background but I can’t add ALT tags to it for SEO. Putting the image in a div allows you to add ALT tags.

1 Like

It didn’t work because what you embedded is not script. It is just a good old <style></style> :smiley:

Ahhh thank you so much!!! I’m such a dork - lol - I totally missed that!! Thank you - it works!!!

1 Like

Haha, it happens. Happy designing!