Wie behebe ich ein responsives Hintergrundbild im Vollbildmodus, das abgeschnitten wird?

Reaktionsfähiges Hintergrundbild im Vollbildmodus

Das Erstellen eines reaktionsfähigen Hintergrundbilds im Vollbildmodus ist eine wesentliche Fähigkeit im modernen Webdesign. In diesem Leitfaden werden wir ein Problem mit einem Vollbild-Hintergrundbild beheben und alternative Lösungen untersuchen.

Fehlerhafter Code

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

Problemanalyse

Der bereitgestellte Code verwendet die Eigenschaft „background-size: cover“, die das Bild so skaliert, dass es den Container abdeckt. Allerdings wird das Bild außerhalb des Bildschirms abgeschnitten, was zu einer unvollständigen Anzeige führt.

Alternative Lösungen

1. Absolute Positionierung mit CSS

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

2. Proportionale Skalierung mit CSS-Medienabfragen

.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 Resize Listener

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

Herausforderungen bei der mobilen Anzeige überwinden

Damit div> auf Mobilgeräten über dem Vollbildbild angezeigt werden kann, sollten Sie die Verwendung von Flexbox oder CSS Grid und absolute Positionierung in Betracht ziehen.

Das obige ist der detaillierte Inhalt vonWie behebe ich ein responsives Hintergrundbild im Vollbildmodus, das abgeschnitten wird?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!