Stop images from appearing stretched

Hey Guys :slight_smile:

In order to make them responsive, I have just changed these images from being background images to images themselves.
However, now they appear stretched as, compared to background images, you can’t set these to “size: cover”.

I hope that makes sense, anyhow, is it possible to rectify this?
Here’s a screenshot of the issue:

and here’s my read only:

The page template in question is called “Blog posts template”
Any help is much appreciated! :slight_smile:

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

I’d recommend using background images for this. It makes them a lot easier to control! Or, if you had to use images blocks, you could have your image wrapper as a flexbox with overflow:hidden and then float the image in the centre of it. This would mean that they would be responsive.

Hiya, do you have a screenshot of what you mean?
I set “image wrapper” to “flex”, but then it wont let me set “blog post image block” to “float” because it says … Floats don’t affect flex children.

Am I doing it wrong?

Thank you for your hep, I really appreciate it :smiley:

Hey! Actually you CAN set normal images as “cover”. All you have to do is add this custom code:

.ClassOfYourImage { width: 100%; height: 100%; object-fit: cover; }

Easy as that. Works just like the cover effect of a background image. :slight_smile:

Hey! ToreSBentsen code snippet should fix the issue, that was described, also there is a request in the wishlist to support object-fit in the Designer Please, vote if you think it will be useful

1 Like

Thank you :slight_smile:
Am I supposed to put this in the head tags for the template page custom code?
I have done this and the images havent changed yet.

Hey! Just put this in your header under custom code in the settings panel. Remember to change “.ClassOfYourImage” to the class of your image. Then it should work like a charm.

 .ClassOfYourImage {width: 100%; height: 100%; object-fit: cover;}

Hope it works. :slight_smile:

Or put this into your embed on the page - this way you will see the changes right in the designer.

Like this?

Because I have tried that now and it still doesn’t seem to work :confused:

Hey! Yeah just like that! But the thing is, that Webflow always convert to lowercase letters (no idea why). So the right one would be:

 .blog-post-image-block {width: 100%; height: 100%; object-fit: cover;}

Hope that helps!


boom! sorted, thank you so much for your help :slight_smile:

Glad i could help. :+1: