Extend the image to fill the width of the browser window.

Question

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

How to do it in HTML and CSS?

Answer 1

You can add a div with a width of 100%, as well as set the width and height of the image to 100%

<div id="wrapper"> <img src="http://lorempixel.com/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 container has the width of the browser window.

Answer 3

 <div class="fixpixel"> <img src="ImagePath" /> </div>​​​​​​​​​​ 

CSS file

 .fixpixel img{ height: auto; background-position: center; background-repeat: no-repeat; background-size: cover; } 

Answer 4

By default, the body field is set to 8 pixels, that is, the space that you see and which does not allow you to stretch the image to the full width and height of the screen.

You can enable

 body {margin: 0px;} 

to prevent this behavior, which I believe was introduced so that pages without styles do not display content that extends to the edge of the page. This has been discussed here .

Answer 5

You add the following <meta> element to the title of your HTML document:

 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 

Then you add

 max-width:100%; height:auto; 

usually CSS for both the image and the image container. (It can also work for an image without a container.)

And you add

 body { margin: 0; } 

to get rid of the margins around the image and / or container. Thus, your image will occupy the entire width of the screen, regardless of its size.