All geek questions in one place

Does HTML5 support image aspect ratio?

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

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

If there is no document like HTML5, the image is distorted:

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

This only works when the image container is a document, it does not work if the image is in a div , for example.

What is this function, and can I somehow scale the image to the full size of the window without deleting the doctype?

+5
source share
2 answers

This "function" is exclusive to quirks mode, in which html and body are 100% high and the heights of the top-level elements are made relative to the body . In standard mode, html and body act like regular block blocks with automatic heights. Since the percentage height cannot be relative to the automatic height, height: 100% does not take effect, and the image maintains the aspect ratio in standard mode.

This is why body backgrounds are displayed completely in quirks mode, but not in standard mode when there is not enough content to fill the page.

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

+6
source

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

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

Source: https://habr.com/ru/post/1273982/

More articles:


All Articles