7

背景画像をカバーするために、CSSのヒントとコツからこのコードを使用しています。問題は、幅と高さの両方に合わせて画像を再スケーリングし、アスペクト比を変更することです。背景画像を全画面幅に再スケーリングしてから、高さのみをトリミングして (中央ではなく、画像の上部から開始して) ビューポートをカバーします。このようにして、画像の縦横比が維持されます。

私が抱えている二次的な問題は、以下の URL だけでなく、画像に FQDN を使用しない限り機能しないように見えることです。

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;
}
4

3 に答える 3

13

それ以外の

background-size: cover;

あなたが使いたいと思うでしょう

background-size: 100% auto;

Coverは、画像の幅と高さの両方がコンテンツ領域内に収まるように画像を最小サイズに拡大するため、問題が発生します。詳しくはこちらをご覧ください。

于 2012-06-27T03:38:16.260 に答える
2

を使用しても、画像の縦横比は変更されませんcover。ただし、画像の下部を修正する必要があると思います。中央ではなく上部からトリミングしたいと言ったので、上下からではないと言いたかったのです。

底を下に保ちたい場合は（おそらく空が大きい草地を避けたいですか？）、位置をcenter bottomからに変更する必要がありますcenter center。

Nitが提案したように100％自動にすると、html要素の高さ/幅の比率が画像よりも大きいウィンドウで、上部に空のスペースが表示されます。これは、特にあなたが上部が同じ色にフェードする画像を使用...

2番目の問題については、fqdnではなく、パスの相対/絶対参照です。css によると、css ファイルがある画像フォルダーに bg.jpg が含まれているはずです。

index.html
main.css
images/
    bg.jpg
于 2012-06-27T03:53:19.947 に答える
0

代わりに JS を使用します。CSS はまだ縦横比をうまく処理していないようです。

次のようなものを試してください：

まず、divを作成し、その中に画像を入れます

<div class="big-image">
   <img src="path.jpg" width="1000" height="1000" alt="whatever">
</div>

次に、CSS でこれを行います。

.featuredImage img {
  position: fixed;
  top: 0;
  left: 0;
  z-index: -10;
}
/* this class will be added via JS */
.bgwidth { width: 100%; }
.bgheight { height: 100%; }

そして最後に、あなたのJS

  var theWindow = $(window),
  $bg = $(".big-image img"), // Use your image selector here.
  aspectRatio = $bg.width() / $bg.height();

  $bg.removeAttr('width');
  $bg.removeAttr('height');

  function resizeBg() {
    if ( (theWindow.width() / theWindow.height()) < aspectRatio ) {
      $bg
        .removeClass()
        .addClass('bgheight');
    } else {
      $bg
        .removeClass()
        .addClass('bgwidth');
    }
  }
  theWindow.resize(function() {
    resizeBg();
  }).trigger("resize");

これが理にかなっているかどうか教えてください。私が知っているCSSだけではありませんが、それは解決策です

于 2012-06-27T03:46:29.300 に答える