Image to fill a div without losing aspect ratio

[Alabone (Al)]

I’m stuck.
Looking to add images to a flex box. I’ve inserted divs and then placed and image inside of each div.
Can’t seem to get the image to fill the div so it looks like a grid and not random sized images…

I’ve looked over the forums… not keen to import every photo to size, I’m wanting it to fill with hidden overflow when I update images from time to time.

Here’s the read only link : https://preview.webflow.com/preview/narrowspark-d39592f4d785e6b5b7563e3d424?utm_source=narrowspark-d39592f4d785e6b5b7563e3d424&preview=da5ecabf4bbde5a5634fffbd0e550fe0

Thoughts?

[vincent (Vincent Bidaux)]

Having an image filling a div happens naturally if you’re using the images as CSS image-backgrounds. But that’s not ideal as they’re not considered as images by HTML anymore, hence not having an alt tag etc.

CSS comes with a handy property, that is not yet supported by Webflow (but I hope it will one day soon). It’s the _ object-fit_ property.

Check the last demo at the end of my clipping and masking demo page.

Clipping, masking and other great CSS properties

I think what you need is this simple line of CS code: .fit { object-fit: cover; }

So you could try to paste the following full code in a custom code component INSIDE of the page (so you can see the effects right in the Designer):

<style>
.div-block-39 {object-fit: cover}
</style>

[Alabone (Al)]

That’s ideal if you’re hosted with Webflow - great solution.
I’m not hosting with webflow for this site so I can’t implement the custom code…

I wondered if I could add something here under Image attributes?

[mikeyevin]

There should be no problem adding custom code to sites not hosted on Webflow, it’s just done differently. I haven’t exported a site yet, but there will be a file included for CSS - just add the bit from @vincent to the very end.

Additionally, I believe you can follow the steps above before exporting the site and the changes should be retained. Anyone more familiar with this process may have some different information but that should get you started.

[Alabone (Al)]

beauty thanks, I’ll have a play.
I don’t get the option to insert html into the pages, perhaps I just can’t find it. I’m looking in the + column where you would ad a div or container etc… nothing there. Is it located somewhere I can’t find? I searched the forum but I might be having an off day…

[vincent (Vincent Bidaux)]

@Alabone

I’m not hosting with webflow for this site so I can’t implement the custom code…

You mean you don’t have the adequate plan.

You can still add the custom CSS in the CSS file when you download your code and assets.

[Alabone (Al)]

I’ve got the plan I want and it looks like I’ve got the solution. I haven’t had to add the CSS as you’ve suggested yet but I’ll hold onto that idea for future reference, thanks for your expertise.

It seems to have worked with the DIV set to Flexbox

And the image inside the DIV set to expand horizontal…

[WrightDesigner (Oliver)]

Looking forward to trying this as I’ve been searching for a solution to this, thanks.

[vincent (Vincent Bidaux)]

Great, elegant! Only downside is if you have a very short imge in height, like a panoramic, it’s not going to fit and cover all the div. Very easily fixed, you just have to add this to your images class:

http://vincent.polenordstudio.fr/snap/Webflow_-_Copy_of_Narrows_Park_practice_2018-11-15_09-47-12.png

This way, it covers the div all the time, whatever the ratio of the image can be.

[Alabone (Al)]

Great idea, thanks, I’ll implement that now!

[SelectDesires]

Thanks for the answer @Vincent Does this method make it so you still download the whole image? I’m looking for something just like this but where it also “crops” away the unseen parts so it does not waste bandwidth.

[Douglas_Fllrtn]

@vincent

<style> .div-block-39 {object-fit: cover} </style>

I’m trying to do this for mobile issues I am having: The images crop when on mobile and do not fill the entire Div they are placed in (which is what I need to happen):

Any help is so appreciated! Here is my link:
https://preview.webflow.com/preview/curative-cannabis-2019?utm_source=curative-cannabis-2019&preview=54692e0432f9a7f11d8ad598c905e317

[webdev (Jeff Selser)]

It is working fine on your published site no? I would add that you would normally add custom styles to the head.

[Douglas_Fllrtn]

Thanks for the reply. Unfortunately, on published its still giving me issues. On the screenshot you can see that on the left and right of the image, the divblock is showing - this of course cascades down through the other breakpoints

What am I missing here?

Thanks in advance!

[IRMS (Kevin B)]

Hmmm… I tried this but Webflow produces an error. I filled out the error report and sent it to Webflow but will see…

My problem is pulling the images from the CMS and they are all of different proportions, wanting them to fill up the space, much like the original poster.

[ohkwon]

Hey @vincent Thank you for this! I thought this should be possible with Webflow but somehow i’m not getting it correctly.

I used applied your code however it’s still not working. Do you see anything working here?

The class applied is .case-image

Preview page:
https://preview.webflow.com/preview/aarini-99be3f?utm_medium=preview_link&utm_source=dashboard&utm_content=aarini-99be3f&preview=73f4b3871e210484928553b513ba2d8d&mode=preview

Thank you!
Ohyoon

[Artur]

For me works this:

Set the Div to Flex and give it a height

The image just needs the Fit set Cover