切り取られた全画面対応の背景画像を修正するにはどうすればよいですか?-CSSチュートリアル-php.cn

切り取られた全画面対応の背景画像を修正するにはどうすればよいですか?

Mary-Kate Olsen

リリース： 2024-11-16 13:57:03

オリジナル

524 人が閲覧しました

How To Fix a Full-Screen Responsive Background Image That Gets Cropped?

全画面レスポンシブ背景画像

全画面レスポンシブ背景画像の作成は、現代の Web デザインでは必須のスキルです。このガイドでは、全画面の背景画像に関する問題のトラブルシューティングを行い、別の解決策を検討します。

問題のあるコード

<div class="main-header">
  <div class="row">
    <div class="large-6 large-offset-6 columns">
      <h1>BleepBleeps</h1>
      <h3>A family of little friends<br>that make parenting easier</h3>
    </div>
  </div>
</div>

ログイン後にコピー

.main-header {
  background-image: url(../img/bb-background2.png);
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  width: 100%;
  height: 100%;
}

ログイン後にコピー

問題分析

提供されたコードは、background-size: cover プロパティを使用します。これは、コンテナーを覆うように画像を拡大縮小します。ただし、画像が画面外で切り取られるため、表示が不完全になります。

代替ソリューション

1. CSS による絶対位置

#bg {
  position: fixed;
  top: 0;
  left: 0;
  min-width: 100%;
  min-height: 100%;
}

ログイン後にコピー

2. CSS メディアクエリによる比例スケーリング

.bg {
  min-height: 100%;
  max-width: 1024px;
  width: 100%;
  height: auto;
  position: fixed;
  top: 0;
  left: 0;
}

@media screen and (max-width: 1024px) {
  .bg {
    left: 50%;
    margin-left: -512px;
  }
}

ログイン後にコピー

3. jQuery サイズ変更リスナー

$(window).load(function() {
  var $bg = $("#bg");
  var aspectRatio = $bg.width() / $bg.height();

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

  theWindow.resize(resizeBg).trigger("resize");
});

ログイン後にコピー