我目前有以下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开发者网络,它调整图像的大小就像我想要调整大小一样.
如果background-size有一个自动组件和一个非自动组件:如果图像具有固有比例,则使用指定的维度渲染它,并从指定的维度和内在比例计算另一个维度.如果图像没有固有比例,请使用该维度的指定维度.对于其他维度,如果有图像,则使用图像的相应内在维度.如果没有这样的内在尺寸,请使用背景定位区域的相应尺寸.
我面临的问题是,当我在浏览器窗口中打开HTML时,这个巨大的1920x1080图像的高度似乎只有50px左右.宽度似乎与高度成正比.
起初,我觉得它可能是某种依赖于浏览器的错误 - 但在Chrome和Firefox中,页面看起来几乎完全相同!
注 - 欢迎使用任何其他SIMPLE解决方案.我不希望此行为依赖于Javascript - 但我不介意该解决方案仅适用于最新版本的FF/Chrome.