HTML5 maintains aspect ratio of images?

Question

I just noticed that Chrome resizes this image keeping its aspect ratio:

<!DOCTYPE html>
<img style="width: 100%; height: 100%;" src="image.jpg">

When the HTML5 doctype isn't there, the image is distorted:

<img style="width: 100%; height: 100%;" src="image.jpg">

This only works when the image's container is the document, it doesn't work if the image is in a div for example.

What is this feature, and can I somehow scale the image to the full window size without removing the doctype?

Got a codepen demo or other link demoing what you're trying to achieve? — Geuis, Dec 11 '17 at 18:47
Why would you ever not have `html` and `body` tags? I assume chrome does that in order to display nicely if you only have an image or it is an unintended sideefect from an invalid html. Anyways since that is invalid html, you won't find an answer that will always and reliably work. — SourceOverflow, Dec 11 '17 at 18:48
@Geuis I mean a SO-code snippet would be the close choice, but I don't know any program that just lets you write that and doesn't add the whole `…`-stuff — SourceOverflow, Dec 11 '17 at 18:50
What are you trying to achieve exactly? Do you want an image that will expand to the full size of the page? — Geuis, Dec 11 '17 at 18:51
Actually `html` and `body` don't make a difference, they can be there and the aspect ratio is still maintained. I'll add them to the example to make that clear. — AndreKR, Dec 11 '17 at 18:51
@Geuis Yes, I want an image that will expand to the full size of the page. — AndreKR, Dec 11 '17 at 18:52
@SourceOverflow: "Why would you ever not have html and body tags?" Because they just add unnecessary bloat and leaving them out isn't invalid? (The asker's edit, adding 8 completely unnecessary lines to their otherwise short and sweet examples, demonstrates this perfectly.) — BoltClock, Dec 11 '17 at 18:53
Both codepen and SO snippets seem to add an HTML5 doctype, so I cannot replicate the second case there. — AndreKR, Dec 11 '17 at 18:56
What happens when you feed chrome valid HTML5? (use validator.w3.org to make your code HTML5 valid) — Code4R7, Dec 11 '17 at 19:01
@Code4R7: Are you implying that the markup is invalid? Other than a missing title element and alt attribute - two very minor issues that don't impact rendering at all - I don't see what is so wrong with the markup that's been given. — BoltClock, Dec 11 '17 at 19:03
@BoltClock The html and body tags are required under certain circumstances as outlined in the spec. — Rob, Dec 11 '17 at 19:07
"A body element’s start tag may be omitted if the element is empty, or if the first thing inside the body element is not a space character or a comment, except if the first thing inside the body element is a meta, link, script, style, or template element." https://www.w3.org/TR/html52/sections.html#the-body-element @BoltClock It's possible the first character here is a new line but it might not be. — Rob, Dec 11 '17 at 19:09
@Rob: That just means that if you want the newline to be part of the body element, you need to place a start tag at the end of the previous line. Otherwise, the newline is treated as inter-element whitespace and discarded (i.e. not part of the body element's content). In this case, it doesn't make any difference to rendering because whitespace in inlines gets collapsed due to `white-space: normal` anyway. As far as CSS is concerned, the only boxes that exist are html, body, img, and the line box that contains the img. — BoltClock, Dec 11 '17 at 19:17
@Mr Lister: Yes, but as I've pointed out, it has zero impact on rendering. I wouldn't object to an edit adding in a title, but I wouldn't kick up a fuss about it either. — BoltClock, Dec 11 '17 at 19:42
@BoltClock You are right, and adding just a title element while not adding the alt attr would not make it into a valid HTML doc. My bad. — Mr Lister, Dec 11 '17 at 19:55

score 6 · Accepted Answer · answered Dec 11 '17 at 19:02

6

This "feature" is exclusive to quirks mode, in which html and body have 100% height, and the heights of top-level elements are made relative to body. In standards mode, html and body act as regular block boxes with auto heights. Since a percentage height cannot be relative to an auto height, height: 100% doesn't take effect and the image keeps its aspect ratio in standards mode.

This is also why body backgrounds display fully in quirks mode, but not in standards mode, when there isn't enough content to fill the page.

To get the quirks-mode behavior in standards mode, set height: 100% on the html element and min-height: 100% on the body element as described here.

answered Dec 11 '17 at 19:02

BoltClock

700,868
160
1,392
1,356

1

For new web pages, of course, there should never be a reason to be in quirks mode or want to emulate it. – Rob Dec 11 '17 at 19:07
Of course not. Different browsers have different quirks too. – Mr Lister Dec 11 '17 at 19:34
@Rob: Agreed, though I wouldn't call this emulating quirks mode. This is just replicating specific quirks in standards mode because their behavior is desired. – BoltClock Dec 12 '17 at 06:13
It seems I was a bit quick to accept this answer. The reasoning makes sense, but the remedy doesn't work: ` ` does not result in the quirks-mode behavior (Chrome 63). – AndreKR Dec 20 '17 at 18:27

score 0 · Answer 2 · answered Dec 11 '17 at 18:55

0

https://codepen.io/anon/pen/OzLrjw

body {
  background: url('http://www.fillmurray.com/200/300'); 
  background-size: cover;
}

answered Dec 11 '17 at 18:55

Geuis

41,122
56
157
219

Not ideal because I already have code that works with images, like attaching onload handlers to them, which I would have to maintain twice. Actually I don't even know how to attach an onload handler to a background image. – AndreKR Dec 11 '17 at 18:57

HTML5 maintains aspect ratio of images?

2 Answers2