Image with 100 VW and Contain has massive top and bottom margins?

This relates to mobile…

When I have an image in a container (Full width), with the Image set to 100VW (or 100%) and Object-Fit “Contain” I end up with a MASSIVE white margin top and bottom of the image on a mobile device. Seems proportional as on the Tablet I still get a large top and bottom margin but not so (visually) disastrous.

There are NO margins on the outside container and set to full width.

This happens ALL THE TIME and is frustrating. PLEASE HELP!!

Hi @nampara17,

Can you share the link to the site in question?


Not really as the site is localhost . The issue relates to the following issue:

"How do you set a background issue that is the size of the image or larger to fit the width of the viewport, without using padding (top and bottom) and image ‘size’ ".

Sounds straightforward but standard CSS would do something like:

max-width: 100%;
height: auto;
background-size: cover (or fill / contain).

The container is set to full width (no margins/padding).

Could use an image, but then if you want text (hero, etc.) not so easy to get text to overlay, etc. Also images do not have so much flexibility.

Cannot set “max-width” in GB only “min-width”. min-width just says “image must be this width at least”. The max-width is flexible for mobile and setting to 100% means it will never break the width of the mobile device.

Now, I may of got totally befuddled with this (quite easy these days). I just want a background image to be the width of the device without setting padding top and bottom.