HTML5 - width=100% not valid problem

[jeddi]

Hi,

In my HTML I have this code:

<img alt="My website pages" title = "My website pages" width="100%" height="150px" src="http://simpg.net/sys_images/simplepage.png"  >

And it displays just fine.

But when I validate it I get:
Bad value 100% for attribute width on element img: Expected a digit but saw % instead.

If I take out the width="100%" then the image doesn't stretch across the screen and doesn't look so good.

Is there an "official" way to stretch the image to fill the screen width ?

Thanks.


.

[LearningCoder]

Use CSS:

Give it an ID like so:

<img alt="My website pages" title="My website pages" id="image" src="http://simpg.net/sys_images/simplepage.png"  >

Then in your CSS, do this:

#image
{
width: 100%;
height: 150px;
}

Give that a try and re-validate your HTML.

Kind regards,

LC.

[jeddi]

THat worked

[AndrewGSW]

This is because the width and height attributes of an img are (pixel) values, so "px" in the height attribute is also invalid.

The previous post confirms that you can set these values in CSS.

An alternative approach is to make the image the background to another element. However, stretching a background-image is only available from CSS3:

background-size: 100%; /* CSS3, or */

.style1 {
        background: url(images/bg.jpg) no-repeat center center fixed;
        -webkit-background-size: cover;
        -moz-background-size: cover;
        -o-background-size: cover;
        background-size: cover;
} /* IE 9+ */