如何修復全螢幕響應式背景影像被裁切的問題？

全螢幕響應式背景圖片

建立全螢幕響應式背景圖片是現代網頁設計的一項基本技能。在本指南中，我們將解決全螢幕背景影像的問題並探索替代解決方案。

有問題的程式碼

<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中文網其他相關文章！