CSS缩放背景图像 [英] css scaled background image
问题描述
（不含任何html5或div）
< style type =text / css>
img {
width：100％;
身高：100％;
margin：0px;
}
< / style>
和
< img src =wacard.pngalt =原始图片title =>
但是
html，body和body）
< style type =text / css>
body {
width：100％;
身高：100％;
margin：0px;
}
< / style>
和
< body
style =background-image：url（wacard.png）;>
< / body>
由此拿起：调整HTML5画布以适应窗口，但据我所知，必须有比我所知道的更多的花式代码，继续，...或者我做错了什么......
我如何获得背景图片来进行缩放？
（理想情况下，不包含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;
}
文章中提到了一个即时修正。
i can get images scaled to fill the window when they are the content, like so: (without any html5 or div)
<style type="text/css">
img {
width:100%;
height:100%;
margin:0px;
}
</style>
and
<img src="wacard.png" alt="original image" title="">
but
this fails (both "html, body" and just "body")
<style type="text/css">
body {
width:100%;
height:100%;
margin:0px;
}
</style>
and
<body
style="background-image: url(wacard.png);">
</body>
as picked up picked up from here: Resize HTML5 canvas to fit window but as far as i understand, that must have some more fancy code than i know of, going on, ... or i'm doing something wrong...
how can i get background images to scale? (ideally, without javascript)
Here is a great tutorial with several solutions: http://css-tricks.com/perfect-full-page-background-image/ Complete with demos and the step by step coding process.
The HTML5 way mentioned is:
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;
}
There is an ie fix mentioned in the article.
这篇关于CSS缩放背景图像的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
