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

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

全画面レスポンシブ背景画像の作成は、現代の 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");
});

モバイル表示の課題の克服

モバイルで div> を全画面画像の上に配置できるようにするには、Flexbox または CSS グリッドと絶対配置の使用を検討してください。

以上が切り取られた全画面対応の背景画像を修正するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。