Why does the W3C validator show error messages for these IMG attributes?
I have an IMG tag in my HTML5 document that reads:
<img src="elements/background.png" alt="" width="100%&q开发者_C百科uot; height="100%" />
When I run the document through the W3C validator (doctype is HTML5, encoding is UTF-8), it comes up with two error messages, one for the width attribute and one for the height attribute. Both say something to the effect of, "Expected a digit but saw % instead."
I checked on the W3C website, and the width and height attributes for the IMG tag both still support percentages in HTML5. What's going on?
According to W3C:
[...] The attributes, if specified, must have values that are valid non-negative integers.
4.8.16 Dimension attributes
Change the values to integers or use CSS.
Using percentages do work, but I guess it has been discontinued in later versions of HTML... I have used it before, like 7 to 8 years ago...
Here is the link which provides the information for the percentages:
HTML - Images & Pictures
Height and width values can also be a percentage. Percentage values are relative to the parent HTML element (usually the body), which means if you have a parent element like a element that is the whole screen (1024x768), then an image with a height and width of 100% will take up that entire body element (1024x768). In our example below, we have placed the image in a table element that is about 400 pixels wide by 200 pixels tall.
I inserted this in the header of my page
<style>
img
{
width: 30%;
height: auto;
border: solid 1px black;
}
</style>
It does make all of the images on the page have the same width, but this is a page needing just one image. It stopped the nasty ululations from the HTML5 validator.
I believe you're misreading the specification, which says "in pixels".
Ref. img – image
Yes, width and height have been supported as a percentage — very useful for mobile devices and resizing based upon the device resolution. HTML5 however, does not (sigh).
Just try this dummy with and without the doctype
<!-- !doctype html -->
<html>
<head></head>
<body>
<style type="text/css">
.pics { background-color:black !important;
border:dashed red 2px;
color:white;
margin:1px; padding:1px; height:65% !important;
}
</style>
<div>
<span>just junk<br></span>
<span>
<img class="pics" src="any_image_you_like.jpg" >
</span>
<div>
</body</html>
Save and open the file — now resize the browser window.
加载中,请稍侯......
精彩评论