Set image to fill

Hi there,

I have an image which fits on a desktop version of my website, but it becomes too short on mobile. Is there a way I can set the image to fill the width and height of its container no matter the height or width?


You can set it to fill the height by cropping the sides just as the height must be cropped to fit various widths now.

Assuming that it fills the page, and that it’s a background image, add or repace {background-size:contain;} with {background-size:cover;}

If this doesn’t do it, then post the appropriate HTML and CSS (as you should have done when you created the post).

Is this a background or an actual image?
Backgrounds are easier using background-size:cover:-

For an image you could user the object-fit property:-

Thanks for the replies. Its actually just an image. Is there a way to do it with an image rather thank background image?

See above.

Sounds like “just an image” means “foreground image”.

Why don’t you post your code, as requested? It would help us help you by saving both of us some time and energy.

Many thanks, the background method worked.

Which “background method”?

using background-size:cover;

1 Like

Thank you.

Cheers! :thumbsup:

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