CSS 图像大小调整
Posted
技术标签:
【中文标题】CSS 图像大小调整【英文标题】：CSS Image Resizing 【发布时间】：2011-03-18 05:30:57 【问题描述】：我有这个 CSS 代码：
<style>
body
position:absolute;
background-image: url(art/c11.jpg);
width:100%;
height:100%;
</style>
当我在网上阅读时，我预计这会调整背景图像的大小并使其适合浏览器窗口。
但是没有。我想我显然做错了什么（我不知道足够的 CSS）。有什么建议吗？
更新：
我添加了孔示例（不起作用）：
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>No Title</title>
<style type="text/css">
body
position:absolute;
background-image:url(art/c11.jpg);
background-size:100%;
background-repeat: no-repeat;
width:100%;
height:100%;
</style>
</head>
<body >
</body>
</html>
【问题讨论】：
你定位你的身体元素有什么原因吗？这应该不是必需的，但将主体的边距和填充设置为 0 通常是一个好主意。这会使一些浏览器的古怪默认值正常化。 【参考方案1】：添加背景重复属性。
完成的代码应该是这样的：
身体 位置：绝对； 背景图片：url（art/c11.jpg）； 背景大小：100%； 背景重复：不重复； 宽度：100%； 高度：100%；【讨论】：
我不知道为什么，但是这两个例子都不适合我......无论如何，谢谢。 刚刚根据 amurra 的建议更新了代码。现在可以用了吗？background-size:100%; 节省了一天。【参考方案2】：
如果您要跨浏览器进行这项工作，最好将图像放在页面上，然后将所有内容包装在放在顶部的 DIV 中。例如
CSS
#background
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
#content
position: relative;
z-index: 1;
如果你打算支持 IE6，那么添加这个 sn-p:
<!--[if IE 6]>
<style type="text/css">
html
overflow-y: hidden;
body
overflow-y: auto;
#background
position:absolute;
z-index:-1;
#content
position:static;
</style>
<![endif]-->
HTML
<img id="background" src="art/c11.jpg" />
<div id="content">
Your content
</div>
Code in action.
【讨论】：
【参考方案3】：我认为没有办法使用 CSS 来拉伸或控制背景图像的大小。但是，您可以使用 background-position、background-attachment 和 background-repeat 属性来获得替代结果..
或者您可以使用一些 javascript 将 Image 放入较低的 z-index 层并将该层设置为您的背景，但这有点hacking
【讨论】：
【参考方案4】：使用css3可以实现透视图大小调整，
html
background: url(bg.jpg) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
这适用于所有浏览器和 ie9+。 以下过滤器也适用于 ie7 和 ie8。
filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='.bg.jpg', sizingMethod='scale');
-ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='bg.jpg', sizingMethod='scale')";
【讨论】：
【参考方案5】：您可以使用 background-size:100% 的 CSS3 属性，但对该属性的支持尚未全面，并且不适用于旧版浏览器。为了实现你想要的，你需要一堆技巧来让它工作。有许多像one 这样的博客会告诉你你需要做什么。我不建议这样做，因为如果你有一个大图像/慢速连接，你会看到图像加载。如果图像不是最好的质量，那么它在屏幕上或在不同的分辨率下都不会看起来很好。
【讨论】：
我不知道为什么，但是这两个例子都不适用于我......无论如何，谢谢。以上是关于CSS 图像大小调整的主要内容，如果未能解决你的问题，请参考以下文章