当图像是内容时,我可以缩放图像以填充窗口,如下所示: (没有任何 html5 或 div)
<style type="text/css">
img {
width:100%;
height:100%;
margin:0px;
}
</style>
和
<img src="wacard.png" alt="original image" title="">
但是
这失败了(“html, body”和“body”)
<style type="text/css">
body {
width:100%;
height:100%;
margin:0px;
}
</style>
和
<body
style="background-image: url(wacard.png);">
</body>
从这里拾取:Resize HTML5 canvas to fit window但据我所知,那一定有一些比我所知道的更花哨的代码,继续......或者我做错了什么......
如何让背景图像缩放? (理想情况下,没有 javascript)
最佳答案
这里有一个很棒的教程,有几个解决方案: http://css-tricks.com/perfect-full-page-background-image/ 完成演示和分步编码过程。
提到的HTML5方式是:
html {
background: url(images/bg.jpg) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
文章中提到了一个 ie 修复。
关于html - css比例背景图片,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/5766825/