HTML5保持图像的纵横比？
HTML5保持图像的纵横比？
提问于 2017-12-11 10:43:37
我刚刚注意到Chrome调整了这个图像的大小，保持了它的纵横比
<!DOCTYPE html>
<img style="width: 100%; height: 100%;" src="image.jpg">当HTML5文档类型不存在时，图像会被扭曲：
<img style="width: 100%; height: 100%;" src="image.jpg">这只有当图像的容器是文档时才能工作，例如，如果图像在div中，它就不能工作。
这个特性是什么，我可以在不删除doctype的情况下将图像缩放到完整的窗口大小吗？
回答 2
Stack Overflow用户
回答已采纳
发布于 2017-12-11 11:02:21
这个“特性”是特殊模式的，其中html和body有100%的高度，顶层元素的高度是相对于body的。在标准模式下，html和body充当具有自动高度的规则块盒。由于百分比高度不能相对于汽车高度，height: 100%不会生效，并且图像保持在标准模式下的高宽比。
这也是为什么 backgrounds display fully in quirks mode, but not in standards mode，当没有足够的内容来填充页面。
要获得标准模式下的怪癖模式行为，请在html元素上设置html，在body元素上设置min-height: 100%，如描述的here。
Stack Overflow用户
发布于 2017-12-11 10:55:50
https://codepen.io/anon/pen/OzLrjw
body {
background: url('http://www.fillmurray.com/200/300');
background-size: cover;
}页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/47759339
复制相关文章
相似问题
腾讯云开发者
