CSS 图像大小调整答案

【问题标题】：CSS Image ResizingCSS 图像大小调整
【发布时间】：2026-02-06 07:50:01
【问题描述】：

我有这个 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 通常是一个好主意。这会使一些浏览器的古怪默认值正常化。

标签： css image resize

【解决方案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" alt="" />

<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 这样的博客会告诉你你需要做什么。我不建议这样做，因为如果你有一个大图像/慢速连接，你会看到图像加载。如果图像不是最好的质量，那么它在屏幕上或在不同的分辨率下都不会看起来很好。

【讨论】：

我不知道为什么，但是这两个例子都不适用于我......无论如何，谢谢。