Bagaimana Untuk Membetulkan Imej Latar Belakang Responsif Skrin Penuh Yang Dipotong?

Imej Latar Belakang Responsif Skrin Penuh

Mencipta imej latar belakang responsif skrin penuh ialah kemahiran penting dalam reka bentuk web moden. Dalam panduan ini, kami akan menyelesaikan isu dengan imej latar belakang skrin penuh dan meneroka penyelesaian alternatif.

Kod Bermasalah

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

Analisis Masalah

Kod yang disediakan menggunakan saiz latar belakang: sifat penutup, yang menskalakan imej untuk menutup bekas. Walau bagaimanapun, ia memangkas imej di luar skrin, menghasilkan paparan yang tidak lengkap.

Penyelesaian Alternatif

1. Kedudukan Mutlak dengan CSS

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

2. Penskalaan Berkadar dengan Pertanyaan Media 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 Ubah Saiz Pendengar

$(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");
});

Mengatasi Cabaran Paparan Mudah Alih

Untuk membenarkan div> duduk di atas imej skrin penuh pada mudah alih, pertimbangkan untuk menggunakan Grid Flexbox atau CSS dan kedudukan mutlak.

Atas ialah kandungan terperinci Bagaimana Untuk Membetulkan Imej Latar Belakang Responsif Skrin Penuh Yang Dipotong?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!