Centrally aligning/cropping cover image in grid container (with no stretch)

Hey,

I’m having some issues on my case study page. I’ve pretty much got the format that I want for desktop but I cannot figure out how to stop my cover images for the link blocks from stretching.

Here’s how they currently look:

Here’s how I would roughly like them to look: Ideally a central focal point of the image and cropped to fit within my grid container. It should still stretch the span of the container with the margins that I’ve given it to align with the Nav.

Can anyone shed some light on my stupidity?

Here’s the live and read only links below:

https://somethingfamiliar.webflow.io/projects

https://preview.webflow.com/preview/somethingfamiliar?utm_medium=preview_link&utm_source=designer&utm_content=somethingfamiliar&preview=cca27db9eefc50ce2aaa7d366b6c8b37&pageId=5d668ffb071de8383af0a007&mode=preview

Sure. No problem.

Add this to your custom header code:

<style>

.image-cover {
    object-fit: cover;
}

</style>

That’s it. You’re all good to go mate. :v:

Legend, why is it not so simple to do this in Webflow?

Thanks mate

I believe they prefer for people to use the background-image way.

But just remember “object-fit: cover” and you will never have to think about that ever again. :v:

1 Like