â–Ľ
Streaming live at 10am (PST)

Save image ratio on any display and device

Hello!
Just started working on website in Webflow several days ago.

I need to add images with the width that will be always 100% of the page and the height of the image will be adapting to the width. Now I can set the width to 100% but on previews, the image is always cropped.
What I need is that when we see the website on any device and any size of the display, the image will be always 100% in width and show full height without cropping.

Thank you

https://preview.webflow.com/preview/acespaced?utm_medium=preview_link&utm_source=designer&utm_content=acespaced&preview=f882d1dca5fdf965f436501d03f35b2b&pageId=5de02d00b1a94ea725710d17&mode=preview

Hi @Artem2,

  1. There’s two different things to know beforehand. Setting a size on the Div, or the actual image. It’s a big difference.

Also, varying results occur based on the image type. PNG’s react differently than SVG. This goes beyond the scope here, but just know if you need the exact size consistency. It’s not going to be Webflow first, you much edit all images very carefully in the photo/graphic editing program first.

  1. I recommend using 100 VW, then all devices will be full width.

  2. Now you cannot get a vertical consistency with all images, because responsiveness, remember is horizontal. Pushing elements inward.

  3. Vertical sizing will vary based on the image resolution (I.e., 2500 x 2500)

So are you setting size on the Div or the image itself?

Hi @garymichael1313
Thanks for your quick reply

I am adjusting the Div (there is an image background).
Width of Div is 100% VW, but the height always changes depending on the size od display, I need it to be always adapted to the width so the images will be never cut off.

Yeah, you won’t get exactness with a BG image because it’s “in the background”, not on the actual page :slight_smile:

Also, this topic has many methods, and honestly I’ve found one method doesn’t always fit for each situation. It’s actually a complex topic, but a few suggestions:

  1. Use a Section, because sections are native 100% full width. Then place image inside.
  2. Using a Div, add 100vw, then image inside.

But I wouldn’t use a BG image if you need responsiveness, it’s tough to get consistency doing this.

I think the solution in this case is just to insert the images as it is and set 100% VW, it works for me.
Thanks for your help!

  1. No, use a Section, set it to 100vw then insert image.
  2. Or use a Section, set to nothing, add Div set it to 100vw, then insert image.

The reason for these is based on two things:

A. Padding: Later on, you may want padding or space from edge of screen. In this case, you won’t use #1, because you’ll be adding padding directly to the image. This can be a problem is some instances.

B. Responsiveness: If you want to reduce size for responsiveness, it’s best to add the size on the Div instead of your Section or Image. Sections shouldn’t really have horizontal sizing to them, maybe sometime height, but that’s about it. And you definitely don’t want to add sizing to images directly if you can avoid it.

See ya.

** Oh forgot - make sure it’s a very large photo, above 3000. Optimize it. Then add Overflow hidden on the Section… ha sorry :slight_smile:

1 Like