Image to fill a div without losing aspect ratio

Community resources General
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?

image
image2290×1182 1.27 MB

1 Like
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>
6 Likes
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.

2 Likes
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.

1 Like
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

image
image253×536 14.1 KB

And the image inside the DIV set to expand horizontal…

image
image246×578 16.5 KB

image

1 Like
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:

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.

2 Likes
10

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

1 Like
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.

12

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):

08
08580×564 114 KB
06
061262×946 18.4 KB

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

13

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

14

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 :confused:

What am I missing here?

Thanks in advance!

48
48988×518 201 KB

15

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.

46
462493×1422 937 KB

16

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

17

For me works this:

Set the Div to Flex and give it a height

Div
Div474×812 32.5 KB

The image just needs the Fit set Cover
Img inside Div

1 Like