Streaming live at 10am (PST)

Image to fill a div without losing aspect ratio


#1

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?


#2

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.

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>

#3

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?
image


#4

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.


#5

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…


#6

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.


#7

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…

image


#8

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


#9

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:

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


#10

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


#11

Thanks for the answer @Vincent :slight_smile: 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.