我刚注意到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吗？
这个"功能"是专属的怪异模式,其中html和body具有100%的高度,和顶层元件的高度相对于由body.在标准模式下,html并body作为与汽车高度普通块盒.由于百分比高度不能相对于自动高度,因此height: 100%不会生效,并且图像在标准模式下保持其纵横比.
这也是为什么body背景完全以怪异模式显示,而不是在标准模式下,当没有足够的内容来填充页面时.
为了获得在标准模式下的怪癖模式行为,设定height: 100%了对html元素min-height: 100%上body所描述的元素在这里.