When I add the '!DOCTYPE html' tag to my document, the images in the document revert to their native size (ignoring css width and height attributes).
I realize that adding the doctype changes the mode the browser displays the document in (the doctype enables 'standards mode' instead of 'quirks mode'). And that is probably the source of the problem. However, I don't understand specifically what 'standards mode' doesn't like about my code, or how to fix it.
What is wrong with the html I have written that 'standards mode' doesn't like?
I see this behavior in Chrome on Windows.
A simplified test case (with doctype, images appear very large, without it they appear smaller):
<!DOCTYPE html>
<html>
<body>
<img src="http://upload.wikimedia.org/wikipedia/commons/d/de/Wikipedia_Logo_1.0.png" alt="Wikipedia Logo" style="width:250; height:250;">
<img src="smiley.png" alt="Smiley Face" style="width:250; height:250;">
</body>
</html>
This is missing the head section, but nothing in the head section I had written made a difference or was necessary to reproduce the problem.
You have to use some unit of measurement when declaring sizes.
img{
width:250px;
}
style="width:250px"