Image element same size as window: closed

Question

I would like to have an image on my html site that is the same width of the site. I have obviously used the <meta name="viewport" content="width=device-width, initial-scale=1.0"> but the image still doesn't change size.

I've even tried some css, but it is only one size: same size as computer, to big for a tablet or phone.

Any help for it?

Could JavaScript help?

Answer 1

You should use viewport unit to do that.

img {
   display: block;
   width: 100vw;
   object-fit: cover;
}

<img src="https://via.placeholder.com/1500" />

Answer 2

<img src='' style='width: 100%; object-fit:cover'/>

Answer 3

I think you can set the width of the image to 100%. Example:

img {
    width: 100%;
}

Or if you want it to be the background image of the page, you can use the background-image element. Example:

body {
    background-image: url(your image name);
    background-size: cover;
}

I am not sure, if this is going to work or not. At least, you can try.