Full Width/Height for Image Tag

Design help General
1

How would I create an image that behaves in a similar way a background image would behave when it’s set to cover. I.e. on different screen sizes, the image would cover the full width and height of the container.

So if the parent container is set to 1000px wide & 450px high, and the image is any other dimension, how can it cover the whole space on all breakpoints?

Note: I’m not referring to background image. I’m referring to an image tag.

Thanks
Steyn

2

There’s a css property called object-fit but still a working draft. I think this website do what your trying Theme Blvd | Theme: Gnar

3

Yes, exactly that. Do you know how this property work or how to implement it on Webflow?

4

Hi @steynv ,

The image settings on the example that @AntonioBalderas shows have the absolute position, minimum height 120% and sit inside the full screen size div with overflow: hidden

You can experiment with your images settings and find the best way to set this parameters so your image would always be full screen size.

Let me know if you will have more questions.

Regards,
Anna

5

Thanks for the help Antonio & Anna!

For anyone else who might be interested, here’s what I did and it seems to be working fine.

I have a Div that contains an Image.

The Div

  • Display: Block;
  • Overflow: Hidden;
  • Position: Absolute - Top, Bottom, Left, Right set to 0.

The Image

  • Display: Block;
  • Max Width/Height: None
  • Position: Absolute

For full screen images:
Experiment with Min Width. For a landscape image to cover the full height I had to set my Min Width to 120%. This will differ from image to image.

For an image to cover any other size:
Set your Div’s Width or Height to whatever dimensions you need. If your image is smaller than these dimensions, you will obviously have to play with your Image’s Min Width again.

Hope it makes sense!

Steyn - Cape Town

1 Like
6

This topic was automatically closed 60 days after the last reply. New replies are no longer allowed.