Stop images from appearing stretched

Design help General
1

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:

image
image1603Ă—821 504 KB

and here’s my read only: Webflow - Dream Big, Travel Far

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)

2

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.

3

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:

4

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:

5

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 Expose object-fit and object-position on image | Webflow Wishlist. Please, vote if you think it will be useful

1 Like
6

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.

7

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.

<style>
 .ClassOfYourImage {width: 100%; height: 100%; object-fit: cover;}
</style>

Hope it works. :slight_smile:

8

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

9

Like this?

image
image1713Ă—631 45.4 KB

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

10

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:

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

Hope that helps!

2 Likes
11

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

12

Glad i could help. :+1: