0

非常に単純な質問なので、この質問を始める前に検索を行いました。私は画像を持っています、そしてそれを私たちのウェブページの唯一の要素として持ちたいです。この画像は私たちが伝えたいことを伝えているので、他のコンテンツはありません。次に、表示されているデバイスに応じて、サイズを変更します。他に選択肢があるかどうか知りたいのですが、これがHTMLで実現できることを願っています。

ありがとうございました、

Karsnen

4

4 に答える 4

2

あなたが探しているのはbackground-size物件です。に適用background-size:cover すると<body>、ビューポートのサイズに関係なく、それに応じて画像のサイズが変更されます。 注：カバーを使用すると、画像がクリップする場合があります。

の代替値には、を含めるbackground-sizeこともできます。代わりに適用するbackground-size:containと、前者と同じように画像のサイズが変更されます。 注：このアプローチでは、画像がクリップされないことが約束されていますが、ネガティブ/デッドスペースも表示されます（これは理想的でない場合もあります）。

CSSは以下を反映する必要があります。

body {
 background-image: url('bg.jpg');
 background-position: center center;
 background-size: cover; /* or background-size: contain */
}
于 2012-08-27T20:24:41.163 に答える
1

画像をWebリソース（「ページ」）として使用できます。のようなものを使用してリンクするかhref="test.jpg"、URLを直接アナウンスすることができます。ブラウザはそれを何らかの形で表示し、ブラウザのウィンドウ幅に合わせて拡大縮小する可能性があります。

次のより単純でより良いアプローチはimg、コンテンツとして要素のみを含むページを使用することです。幅を100％に設定することで（HTMLまたはCSSで）ブラウザウィンドウの幅に合わせて拡大縮小できます。このようにして、スケーリング時に幅と高さの比率を維持します。ブラウザのスケーリングの品質はさまざまですが、大幅にスケールアップしない限り、一般的には良好です。このアプローチでは、画像の固有の幅を十分に大きくして（たとえば、2,000ピクセル）、大幅な上方スケーリングを回避する必要があります。

画像の周囲のデフォルトの間隔（デフォルトのページ余白）を削除するには、CSSを使用するのが最も簡単です。

例（「...」は有用な情報に置き換えられます）：

<!doctype html>
<meta charset=utf-8>
<title>...</title>
<style>
html, body { margin: 0; padding: 0; }
</style>
<img src="demo.jpg" alt="..." width="100%">
于 2012-08-27T21:23:28.473 に答える
0

それをとして設定しbackground-image、適切なものを使用しますbackground-size（例contain）：

html {
    height: 100%;
}

body {
    background: url('to/your/image.png') no-repeat;
    background-size: contain;
}

これがデモです。

于 2012-08-27T20:25:59.850 に答える
-1

私はこれを使用します：css

#body{
    background:url(../img/bg.jpg);
    margin: 0;
}

javascript

$("#body").css('width',window.innerWidth)
$("#body").css('height',window.innerHeight)
于 2012-08-27T20:29:49.240 に答える