CSS 缩放背景图像

发布于 2024-11-03 04:54:04 字数 769 浏览 1 评论 0 原文

当图像是内容时，我可以缩放图像以填充窗口，如下所示：（没有任何 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>

从这里拾取：调整 HTML5 画布大小以适合窗口，但据我了解，这肯定有一些比我知道的更奇特的代码，继续，。 ..或者我做错了什么...

我怎样才能缩放背景图像？（理想情况下，没有 JavaScript）

原文

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)

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

余厌 2024-11-10 04:54:04

这是一个很棒的教程，其中包含多种解决方案：
http://css-tricks.com/perfect-full-page-background-图片/
完成演示和逐步编码过程。

提到的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修复。

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.

回复收藏 0 原文