CSS3 - (background-size: auto 100%;) - 意外行为答案

【问题标题】：CSS3 - (background-size: auto 100%;) - unexpected behaviorCSS3 - (background-size: auto 100%;) - 意外行为
【发布时间】：2012-06-26 16:57:58
【问题描述】：

我目前有以下 CSS（称为 splash.css）：

html { 
    background:url(splash.jpg) center no-repeat;
    background-size:auto 100%;
}

还有以下 HTML：

<!DOCTYPE html>
<HTML>
    <HEAD>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/> 
        <TITLE>Test</TITLE>
        <link href="splash.css" rel="stylesheet" type="text/css" media="screen" />
    </HEAD>
    <BODY>
    </BODY>
</HTML>

我试图让名为 splash.jpg 的背景图像始终与浏览器窗口具有相同的高度，并调整它的大小（保持其纵横比）并允许一些宽度保留在浏览器窗口之外。此外，背景必须以浏览器窗口为中心。

目前我希望我的 CSS 完全按照它应该做的事情。我已将背景设置为与中心水平和垂直对齐，并将其设置为应有的图像。我还将背景大小设置为自动 100% - 根据Mozilla Developer Network，它会调整图像的大小，就像我希望它调整大小一样。

如果背景尺寸有一个自动组件和一个非自动组件：如果图像具有固有比例，则使用指定维度进行渲染，并根据指定维度和固有比例计算其他维度。如果图像没有固有比例，请使用该尺寸的指定尺寸。对于另一个维度，如果有，则使用图像的相应固有维度。如果没有这样的固有维度，则使用背景定位区域的对应维度。

我面临的问题是，当我在浏览器窗口中打开 HTML 时，这个巨大的 1920x1080 图像的高度似乎只有 50 像素左右。宽度似乎也与高度的比例正确。

起初，我觉得这可能是某种依赖于浏览器的错误 - 但页面在 Chrome 和 Firefox 中的显示几乎完全相同！

注意 - 欢迎任何其他简单的解决方案。我不希望这种行为依赖于 Javascript - 但我不介意该解决方案仅适用于最新版本的 FF/Chrome。

【问题讨论】：

如果您向页面添加更多内容，背景也会出现。

标签： css

【解决方案1】：

将height: 100%; 添加到您的html 样式中。

【讨论】：

哇。非常感谢。有效。我想我之前有 height: 100% ，然后我删除了它......猜猜问题是背景填充的元素没有填充屏幕？
html, body { height: 100%; } IDK 为什么，但我一直认为您需要设置正文和 HTML，因为不能保证两者都有高度。
@rlemon 由于背景应用于html 元素，所以body 的高度完全没有区别。

【解决方案2】：

就用这个吧：

body { background-size: cover; }

这是一个用背景图片覆盖页面的 CSS3 属性。我忘记了它是否保持完美的纵横比，但值得一试，伙计。

【讨论】：

是的，也尝试过 - 请参阅 Kolink 的答案，这很有效。封面也做了一些奇怪的事情，因为我的元素没有覆盖页面，背景必须只覆盖元素。更重要的是，cover 并不能解决始终以 100% 显示全高的问题 - 可能不会显示全高（例如，只有一半的图像，高度方面）。我希望整个高度始终可见。

【解决方案3】：

background: url('/img/bg0.jpg') no-repeat center center fixed; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='.myBackground.jpg', sizingMethod='scale'); -ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='myBackground.jpg', sizingMethod='scale')";">

【讨论】：