Set image to fill

[toolman]

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?

Thanks!

[ronpat]

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).

[SamA74]

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

Perfect Full Page Background Image | CSS-Tricks

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

object-fit | CSS-Tricks

[toolman]

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

[ronpat]

@toolman

Is there a way to do it with an image rather thank background image?

See above.

@SamA74

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

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.

[toolman]

Many thanks, the background method worked.

[ronpat]

@toolman

the background method worked.

Which “background method”?

[toolman]

using background-size:cover;

[ronpat]

@toolman

using

background-size:cover;

Thank you.

Cheers!