Save image ratio on any display and device

Design help General
1

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

2

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?

3

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.

4

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.

5

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!

6
  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:

2 Likes
7

hi Gary, thanks for your explanations. What would be the meaning to have the picture specifically larger than 3000 and combining it with Overflow?

Since using background pictures for responsiveness of the website isn’t an option, most like Images would be placed within a Div with the Absolute position. So do you mean that with Overflow you would be able to cut necessary areas of pictures? Or why do we need the overflow in such cases?

thanks

8

Hey there @meetingingorkipark,

Yeah, it really doesn’t matter what you’re doing to an image in regards to positioning and styling; if the size resolution is small. Inevitably, it will get scaled up by someone’s browser at some point.

You can never predict this, so going as large as you can during the photo editing process is always best practice. It eliminates that one time a user has a really wide screen - but not very tall. The list is endless!

I always build imaging at 3840 or 5120 to cover large monitors or TV’s. It’s just a safe bet.

And remember, users don’t develop. They may visit a site at work on a large monitor, then visit from they’re phone or tablet in the car, or at home. Users don’t scale a browser down to view responsiveness. We do that to test, but users are not scaling sizes to test.

3840, helps to eliminate another variable :slight_smile:

See ya!

9

Hi Gary, understand. Thank you :smile:

10

Hi again Gary,

I was wondering how you deal with lottie animations in this case and how you’d keep them in good quality on the large screen? If you use lottie of course…
When exporting a lottie file with a resolution of 1980 px usually it exceeds 30 MB which is the limit of Webflow… And if using the twice lower resolution 990 px then usually on the they already a bit blurred… Especially on a large screen of 1980 px. So it would just look awefull on the resolution of 3-4-5k+…

Thank you

Thanks

11

I’ve had this issue with the SVG and I’ll chip in what worked for me.

I did Min Width at 100 VW, and despite the height being on Auto the SVG didn’t appear because height was seen by the browser as 0px (but Webflow preview showed the SVG normally as it should appear).
So, to make it the same ratio as in the SVG design, I’ve found that setting the Min Height to 1% did the trick.

Hope this helps someone!