html - css比例背景图片

标签 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)

最佳答案

这里有一个很棒的教程,有几个解决方案: 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/

相关文章:

javascript - 具有不同元素符号和数字颜色的默认 ol 和 li 样式

html - 用左、右和底部 div 包围一个 div

image - 使用用 css3 创建的图像作为按钮的背景?

c++ - 如何从线性轴到日志?

css - 使用 CSS 缩放

html - CSS 大型下拉菜单

javascript - 可以在三星平板电脑的 native 浏览器上调试 javascript

android - 上传图片/照片/图像 facebook (android)

android - ActionBarSherlock 背景的图像大小

javascript - jointjs 的缩放问题