1

私は現在、次の 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 が本来の機能を正確に実行することを期待しています。背景を水平方向および垂直方向に中央に揃えるように設定し、本来あるべき画像に設定しました。また、background-size を auto 100% に設定しました。これにより、Mozilla Developer Networkによると、サイズ変更したいのとまったく同じように画像のサイズが変更されます。

background-size に 1 つの自動コンポーネントと 1 つの非自動コンポーネントがある場合: 画像に固有の比率がある場合は、指定された寸法を使用してレンダリングし、指定された寸法と固有の比率から他の寸法を計算します。画像に固有の比率がない場合は、その寸法に指定された寸法を使用します。他の寸法については、画像に対応する固有の寸法があればそれを使用します。そのような固有の寸法がない場合は、背景配置領域の対応する寸法を使用します。

私が直面している問題は、ブラウザー ウィンドウで HTML を開くと、この 1920x1080 の巨大な画像の高さが 50px 程度しかないように見えることです。幅も高さに対して適切な比率になっているようです。

最初は、ある種のブラウザ依存のバグかもしれないと感じましたが、ページは Chrome と Firefox の両方でほとんど同じように表示されます!

注 - その他の SIMPLE ソリューションは大歓迎です。この動作が Javascript に依存することは望ましくありませんが、最新バージョンの FF/Chrome でのみ機能するソリューションであることは気にしません。

4

3 に答える 3

5

あなたのスタイルに追加height: 100%;します。html

于 2012-06-26T17:02:01.733 に答える
3

これを使用するだけです：

body { background-size: cover; }

これは、ページを背景画像でカバーする CSS3 属性です。完璧なアスペクト比を維持しているかどうかは忘れましたが、試してみる価値はあります。

于 2012-06-26T17:06:39.663 に答える