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.

Answer 1

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.

Answer 2

img.s1 {
  width: 100%;
}

or .. if you want absolute positioning

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