css比例背景图像

时间:2011-04-23 20:45:28

标签: html image scale

当它们是内容时,我可以缩放图像以填充窗口,如下所示: (没有任何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)

4 个答案:

答案 0 :(得分:8)

这是一个很好的教程,有几个解决方案: 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修复。

答案 1 :(得分:1)

据我了解,您想要创建一个完整页面重新调整大小的背景。如果是这样,请按照此处的说明操作=&gt; http://css-tricks.com/perfect-full-page-background-image/

答案 2 :(得分:0)

还考虑进一步审查和选项,如我的情况,

的价值
background-position:

设置选项......

http://developer.mozilla.org/en-US/docs/Web/CSS/background-position

以及

background-origin:

https://developer.mozilla.org/en-US/docs/Web/CSS/background-origin

伴随backbackground-image CSS样式设置。

答案 3 :(得分:0)

模仿,并添加了背景图片

例如background: url(back.jpg) fixed;

使它缩放所需的全部是

background-size: cover;

少就是多。 ;)