问题
Excuse me if it is a dumb question, but the fact is that I do not have any idea about it.
I was searching to find some way to position an img element in HTML pages that noticed this sentence from w3schools.com (It is speaking of setting width in an img element):
In HTML 4.01, the width could be defined in pixels or in % of the containing element. In HTML5, the value must be in pixels.
It says that the width attribute must be set in pixels not in percent. But solving my problem was far more easier when using percentage. I used the percent and checked the result in the latest versions of FireFox, Chrome, and IE. All were OK.
Now, my question is that what are bad consequences of using percent (despite HTML5 directives) while it actually works fine? What should we care about and what we shouldn't?
Thank you very much for reading and clarifying the situation.
回答1:
The main reason for giving image dimensions in HTML, rather than in CSS, is so that the user agent (the browser) can leave an appropriate amount of space in the page for the image while the browser is waiting for it to load. If the image size is left unset, the browser will have to rerender the page once the image has downloaded--and do the same again for each subsequent image on the page.
The WHATWG HTML5 docs state the following in the section on presentational markup:
For those reasons, presentational markup has been removed from HTML in this version. This change should not come as a surprise; HTML4 deprecated presentational markup many years ago and provided a mode (HTML4 Transitional) to help authors move away from presentational markup; later, XHTML 1.1 went further and obsoleted those features altogether.
I would assume that since percentage values are relative to the element in which an image is contained, they are considered to be presentational, whereas pixel dimensions are absolute and will not vary across platforms, user agents, or view ports.
As with many HTML properties and attributes, you can use invalid, obsolete, or non-recommended syntax and browsers will still render your page. This is partially because they are usually backward-compatible--i.e. they can render HTML docs written in previous versions of the markup language, when the syntax was valid.
Should you use invalid syntax? Well, you can do, but there are downsides to it: unpredictable browser rendering of invalid elements, poor browser performance, cross-browser compatibility issues, potential security concerns, and more. There is also the knowledge that there are HTML pedants out there who are looking at your syntax like it's something the dog threw up. Ultimately, if you can do something the right way--specifying your percentage widths in your css, not in your html--I don't see any point in doing something wrong just because the browsers that you tried it out on will still render the page.
As noted in my comment, image width and height can be specified in CSS using various different units--pixels, ems, rems, percent, centimetres, inches, etc -- see css measurement units @ w3.org.
回答2:
Hi what I found is your assumption is correct but to make it clear try this yourself. Based on the W3 validator
If you pass this code:
<img src="http://placehold.it/350x150" alt=" " width="100%" height="100%">
you get an error
Bad value 100% for attribute width on element img: Expected a digit but saw % instead.
But if you get this
<img src="http://placehold.it/350x150" alt=" " width="350" height="150">
All is fine, then the specification is that you can't define percentages in the tag itself but you can do that with css.
来源：https://stackoverflow.com/questions/26100484/what-are-the-consequences-of-using-percentage-for-width-height-attributes-of-an