Stretch an image to fill width of browser window

Question

I have an image, and I want the width to fill up the browser window, no matter the size of the window.

How do I do this in HTML and CSS?

Answer 1

You can add a div with width an height of 100%, also set image's width and height are 100%

<div id="wrapper">
    <img src="https://picsum.photos/200/200">
</div>​​​​​​​​​​

CSS:

#wrapper, img{
    width:100%;
    height: 100%;
}

jsfiddle

Answer 2

<img src="filename.jpg" alt="alt text" width="100%" />

This assumes that the image's container is as wide as the browser window.