htmlcssimagedevice-width

Image element same size as window: closed

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?

Solution

  • You should use viewport unit to do that.

    img {
   display: block;
   width: 100vw;
   object-fit: cover;
}
    <img src="https://via.placeholder.com/1500" />