CSS3-（背景大小：自动100%；）-意外行为_Css

CSS3-（背景大小：自动100%；）-意外行为

css

CSS3-（背景大小：自动100%；）-意外行为,css,Css,我目前有以下CSS（称为splash.CSS）：以及以下HTML： <!DOCTYPE html> <HTML> <HEAD> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/> <TITLE>Test</TITLE> <link href="splash.css" rel=

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

以及以下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%”，根据，它会调整图像大小，就像我希望调整图像大小一样

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

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

起初，我觉得这可能是某种依赖于浏览器的bug——但在Chrome和Firefox中，页面看起来几乎完全相同

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

Add

height:100%到您的html
样式。
添加高度：100%到您的html
样式。
只需使用以下命令：
body { background-size: cover; }

这是一个CSS3属性，用背景图像覆盖页面。我忘了它是否保持了完美的纵横比，但值得一试，伙计。
用这个：
body { background-size: cover; }

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')";">

这是一个CSS3属性，用背景图像覆盖页面。我忘了它是否保持了完美的纵横比，但值得一试，伙计。
Wow。谢谢。成功了。我想我有身高：100%在他们之前，然后我删除它。。。我猜问题是背景填充的元素没有填充屏幕？html，body{height:100%；}
IDK为什么我总是假设您需要设置body和html，因为不能保证两者都有高度。@rlemon因为背景应用于html
元素，身体的高度绝对没有区别。谢谢。成功了。我想我有身高：100%在他们之前，然后我删除它。。。我猜问题是背景填充的元素没有填充屏幕？html，body{height:100%；}
IDK为什么我总是假设您需要设置body和html，因为不能保证两者都有高度。@rlemon因为背景应用于html元素，身体的高度绝对没有区别。是的，我也试过了——看Kolink的答案，这很有效。封面也做了一些奇怪的事情，因为我的元素没有覆盖页面，背景只能覆盖元素。更重要的是，封面无法解决始终以100%显示全高的问题-可能无法显示全高（例如，仅显示图像的一半，高度）。我希望整个高度始终可见。是的，我也试过了——看Kolink的答案，这很有效。封面也做了一些奇怪的事情，因为我的元素没有覆盖页面，背景只能覆盖元素。更重要的是，封面无法解决始终以100%显示全高的问题-可能无法显示全高（例如，仅显示图像的一半，高度）。我希望整个高度始终可见。如果向页面添加更多内容，背景也会出现。如果向页面添加更多内容，背景也会出现。
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')";">