0

私のウェブサイトがより大きなモニターで表示されていても、最後に空白を表示せずに画像が広がり、拡張されるように、ブラウザー全体で画像を作成する方法を考えていました。

4

2 に答える 2

2

基本的に次の 2 つの選択肢があります。

  1. 幅全体を満たす繰り返しパターンを使用します。これを使用してこれを行うことができます

    width: 100%; background: url(your-image-file) repeat-x

  2. 固定のメイン イメージと、残りの領域を埋める背景フィラー イメージを使用します。背景は上記と同じコードを使用し、メイン イメージimgは背景コンテナー内にある可能性があります。

于 2011-02-04T15:28:36.027 に答える
0

まず、このコードでマージンをクリアしましょう。

* {            
    margin: 0;
    padding: 0;
}

これをスタイルシートまたはセクションで使用することにより、これらの画像を空白なしで完全に伸ばすことができます。

次に、歪んで見えない画像を作成します。これを行うには、最初にかなり広い形式で作成する必要があります。背景全体を塗りつぶしたい場合は1028X768 px、適切なサイズとしてお勧めします。

最後に、コードの最後のビットを配置して、すべてを機能させるときが来ました。

html { 
    background: url(images/bg.jpg) no-repeat center center fixed; 
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
}

これは、現在のすべてのブラウザー（IE8以下を除く）の近くでdangで機能します。

スパンしたいが完全にはカバーしない奇数サイズの画像を配置するには、を使用し<div>て画像の場所を作成し、にスタイルを追加する<div>ことをお勧めしますwidth: 100%;。

これは高さでも行うことができます。

お役に立てれば。

于 2012-07-30T17:29:58.613 に答える