0

私はウェブサイトに取り組んでいます。ホームページの背景は画像です。私はこのウェブサイトのためにもっと多くの解像度をテストしました。1920x1536の解像度を入力して、結果を確認します。

ここに画像の説明を入力してください

これが私のCSSです：

body.Homepage
{
    background:url(homepage/Background1.jpg) no-repeat top;
}

ブラウザに合わせて画像を拡大縮小するにはどうすればよいですか？（写真のサイズ変更に加えて）。

4

5 に答える 5

1 
background-size: cover;

参照：

于 2013-01-26T15:21:51.170 に答える
1

私があなたの質問をよく理解しているなら、あなたはあなたの背景をブラウザのウィンドウサイズに伸ばしたいと思います。このための純粋なCSSソリューションはありませんが、JavaScript+jQueryソリューションがあります。これでうまくいきます。

  1. Backstretchは、動的にサイズ変更されたスライドショー対応の背景画像を任意のページまたは要素に追加できるシンプルなjQueryプラグインです。
  2. フルサイズの背景画像jQueryプラグイン：Reduxチュートリアル。Safari、Chrome、Firefoxでテストしたところ、完全に機能するようになりました。必要なのは、背景として表示したい画像だけです。それを入手してプラグインを使用すると、画像はブラウザウィンドウの全幅/高さにサイズ変更されます。ブラウザウィンドウのサイズが変更されるたびに、背景画像のサイズも変更されます。
  3. jQueryスケーラブルフルスクリーン背景画像チュートリアル。

そして、これが純粋なCSSを使用してフルスクリーンの背景画像を取得するテクニックです。しかし、私はそれをテストしていません。これがデモです。

CSS

html, body {
  height: 100%;
  width: 100%;
  padding: 0;
  margin: 0;
}

#full-screen-background-image {
  z-index: -999;
  min-height: 100%;
  min-width: 1024px;
  width: 100%;
  height: auto;
  position: fixed;
  top: 0;
  left: 0;
}

#wrapper {
  position: relative;
  width: 800px;
  min-height: 400px;
  margin: 100px auto;
  color: #333;
}

HTML

<body>
  <img alt="full screen background image" src="/background.jpg" id="full-screen-background-image" /> 
  <div id="wrapper">
    <p>Content goes here...</p>
  </div>
</body>

参照： http： //paulmason.name/item/full-screen-background-image-pure-css-code

于 2013-01-26T16:32:48.643 に答える
1

これは、幅と高さが 100% の負の z-index とマージンのない固定 img を使用することで、かなりハックな方法であることがわかりました。http://jsfiddle.net/howderek/jTPUN/

これの欠点は、背景が CSS ではなく HTML によるものであることですが、利点は JS がないことです。

背景画像をスクロールさせたい場合は、固定ではなく絶対にしてください。

HTML:

<img src="http://derek.genevievehoward.com/images/unicorn.jpg" id="bg" alt=""/>

CSS:

#bg {
    width: 100%;
    height: 100%;
    margin: 0;
    z-index: -1;
    position: fixed;
    top: 0px;
    left: 0px;
}
于 2013-01-26T21:18:11.380 に答える
0

CSS のみを使用する場合は、次の点に注意してください。

含む

固有の縦横比 (存在する場合) を維持しながら、幅と高さの両方が背景の配置領域内に収まるように最大サイズに画像をスケーリングします。

カバー

固有の縦横比 (存在する場合) を維持しながら、幅と高さの両方が背景の配置領域を完全にカバーできる最小サイズに画像をスケーリングします。Contain は、常にビューポート内に画像全体を収め、背景画像とブラウザー ウィンドウの比率が同じでない場合は常に、上下または左右に不透明な境界線を残します。

カバーは常にブラウザー ウィンドウを埋め尽くし、その過程で髪の毛や耳を切り落とします。これは、ほとんどの場合、私が個人的に好む方法です。background-position プロパティを使用して、ビューポート内で画像をどのように配置するかを制御できます。

これは、これらの方法のいずれかを使用すると、画像が比例してスケーリングされることを意味します。唯一の違いは、1 つは画像の一部を切り取って収まるようにすること、もう 1 つは画面の解像度が画像の縦横比と一致しない場合に空白を追加することです。

最初の画像が、指定した画面解像度をカバーするのに十分な大きさでない場合 (および/または縦横比が同じでない場合)、どのオプションを使用しても余白が残ります。

于 2013-01-26T16:59:38.553 に答える
0

以外background-size: cover;にも使用できます

background-size: contain;

引用参照: http://www.w3schools.com/cssref/css3_pr_background-size.asp

幅と高さの両方がコンテンツ領域内に収まるように、画像を最大サイズにスケーリングします

于 2013-01-26T15:28:16.743 に答える