...

View Full Version : HTML5 - width=100% not valid problem



jeddi
01-04-2013, 11:00 AM
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
01-04-2013, 01:22 PM
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
01-04-2013, 02:54 PM
THat worked :thumbsup::thumbsup:

AndrewGSW
01-04-2013, 03:01 PM
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+ */



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum