100% img div according to page

Question

How can I stretch an image to use all the WIDTH of page?

I am using div tag.

<div align="center">
                <img class="s1" src="<%=image%>"/>
        </div>


img.s1
{
display: block;
margin-left: auto;
margin-right: auto;
border-width: 0px 0px 0px 0px;
size: 100%;
}

Thanks.

This should answer your question: http://stackoverflow.com/questions/376253/stretch-and-scale-css-background — , Nov 03 '11 at 08:54

Grant Thomas · Answer 1 · 2011-11-03T09:03:39.453

2

You can specify that the image be the width of its container, if that is the page, then so be it - but you need to specify width, not size:

width: 100%;

Similarly, you can also specify the height; this might become useful in your case, as, if you check the test case provided by ShadowWizard then you'll notice, the aspect ratio may be kept (which could either shrink the height within its container or expand it out of the container). Using height will force it to size accordingly, obviously.

edited Nov 03 '11 at 09:03

answered Nov 03 '11 at 08:53

Grant Thomas

44,454
10
85
129

+1, quick [test case](http://jsfiddle.net/f32GS/) (was going to post same answer :)) – Shadow The GPT Wizard Nov 03 '11 at 08:57
@ShadowWizard Thanks for the test case, prompted me to elaborate a little, too. – Grant Thomas Nov 03 '11 at 09:04

score 2 · Accepted Answer · answered Nov 03 '11 at 08:53

2

img.s1 {
  width: 100%;
}

or .. if you want absolute positioning

img.s1 {
  position: absolute;
  left: 0;
  right: 0;
}

answered Nov 03 '11 at 08:53

Fred

4,195
2
29
42

100% img div according to page

2 Answers2