Why does the W3C validator show error messages for these IMG attributes?_问答_开发者

Why does the W3C validator show error messages for these IMG attributes?

开发者 https://www.devze.com 2023-02-08 14:50 出处：网络

I have an IMG tag in my HTML5 document that reads: <img src="elements/background.png" alt="" width="100%&q开发者_C百科uot; height="100%" />

相关专题：

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.