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?

possible duplicate of [CSS or jQuery scalable background image with NO white space underneath when img height is less than window height](http://stackoverflow.com/questions/5072750/css-or-jquery-scalable-background-image-with-no-white-space-underneath-when-img) — Joseph, Mar 16 '12 at 02:54

sbagdat · Answer 1 · 2022-02-19T20:38:39.817

17

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

edited Feb 19 '22 at 20:38

answered Mar 16 '12 at 02:57

sbagdat

830
11
25

score 8 · Answer 2 · answered Mar 16 '12 at 02:53

8

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

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

answered Mar 16 '12 at 02:53

Brian Willis

22,768
9
46
50

1

this is not valid for HTML 5. In HTML5, value must be in pixels. – sbagdat Mar 16 '12 at 03:03
@sbagdat Interesting. I didn't know that. Any idea why percent was removed as an option? – Brian Willis Mar 16 '12 at 03:06
probably when images are getting bigger, they are losing quality. here is the w3c link: http://www.w3schools.com/html5/att_img_width.asp – sbagdat Mar 16 '12 at 03:11
svg (vectorial) images don't lose quality. It works for me in browsers/devices I tried – dstonek Jul 10 '18 at 20:53

score 2 · Answer 3 · edited Sep 09 '19 at 04:32

You add the following <meta> element in the head of your HTML document:

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

Then you add

max-width:100%;
height:auto;

as a CSS rule for both the image and the container of the image. (It can also work for the image without having a container.)

And you add

body {
    margin: 0;
}

to get rid of the margin around the image and/or container. This is how your image will fill the whole width of the screen, no matter what size the screen is.

Sabarish R · Answer 4 · 2017-09-01T09:32:39.773

1

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

CSS file

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

edited Sep 01 '17 at 09:32

answered Sep 01 '17 at 09:22

Sabarish R

71
1
7

score 0 · Answer 5 · answered Sep 22 '18 at 12:58

The margin of the body element is set to a default of 8px, which is the space you are seeing which prevent the image to stretch the full width and height of the screen.

You can include

body {margin: 0px;}

to prevent this behavior, which I guess was put in place to prevent unstyled pages to present the content pushing to the edge of the page. It was discussed here.

Stretch an image to fill width of browser window

5 Answers5

Linked