Object fit - What am I doing wrong

[jasonjkd (Jason)]

Hi Guy’s

I’m trying to use Object fit instead of a background image. I dont know what I am doing wrong.

I’ve put a div in the grid set it to 100% height and 100% width added an image. I’ve set the div to cover but the image is not changing in size.

I have attached a screen shot.

Thanks

Jason

Here is my site Read-Only: LINK
(how to share your site Read-Only link)

[JSW (James)]

Hi,

This is because the image is not filling the div. The best way to achieve this is to remove the div block, and put the image right inside the grid. Set the image width and height to 100% and then select ‘fit=cover’.

I think that will work, but if not, post a share link and I’ll have a go at fixing it.

[dram (Alex Dram)]

The image is not covering the div because you didn’t tell the image to use cover object fit. This is something you apply directly to images not their parents.

[jasonjkd (Jason)]

Hi Guy’s

Here is the share link. It seems a bit hit and miss.

https://preview.webflow.com/preview/europump-2020?utm_medium=preview_link&utm_source=designer&utm_content=europump-2020&preview=e7de4b2c873b3ffc9efcbbe8469772c6&pageId=5e7a697cb982208fdd23fa2e&mode=preview

[JSW (James)]

1. Drag the image out of the div and into the grid.
2. Remove the Div so the layout looks like this:
   
   3.Set the images width and height to 100% and the fit to cover like this: