logo标签列表

CSS缩放背景图像

htmlimagescale
4
我可以使图片填充整个窗口，就像这样： （不需要使用HTML5或div）
  <style type="text/css">
img {
width:100%;
height:100%;
margin:0px;
}
  </style>

and 

<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）

4个回答
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
0

在编程方面，添加背景图片后，只需要像这样：

background: url(back.jpg) fixed;

就可以使其适应所有尺寸。

background-size: cover;

简洁就是美。 ;)

为了方便和简洁起见，我添加了这个答案，省去了我的词汇混乱和额外的编辑工作，以及在Jackreichert的好回答中发现的多余内容，这样每次我回来提醒自己多年。 - digit
0
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接