Question

我刚注意到Chrome调整了此图片的大小保持其宽高比：

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

当HTML5 doctype不存在时，图像会失真：

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

仅当图像的容器是文档时才有效，如果图像位于div中则不起作用。

这个功能是什么，我可以以某种方式将图像缩放到完整的窗口大小而不删除doctype吗？

Answer 1

这个＆＃34;功能＆＃34;是quirks模式专有的，其中html和body的高度为100％，顶级元素的高度相对于body。在标准模式下，html和body充当具有自动高度的常规块框。由于百分比高度不能相对于自动高度，height: 100%不起作用，图像在标准模式下保持其纵横比。

这也是body backgrounds display fully in quirks mode, but not in standards mode的原因，当没有足够的内容来填充页面时。

要在标准模式下获取怪癖模式行为，请按照here所述设置height: 100%元素上的html和min-height: 100%元素上的body。

Answer 2

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

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

HTML5保持图像的宽高比？

2 个答案: