Comment réparer une image d'arrière-plan réactive en plein écran qui est recadrée ?

Image d'arrière-plan réactive en plein écran

Créer une image d'arrière-plan réactive en plein écran est une compétence essentielle dans la conception Web moderne. Dans ce guide, nous allons résoudre un problème avec une image d'arrière-plan en plein écran et explorer des solutions alternatives.

Code problématique

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

Analyse du problème

Le code fourni utilise la propriété background-size: cover, qui redimensionne l'image pour couvrir le conteneur. Cependant, il recadre l'image hors écran, ce qui entraîne un affichage incomplet.

Solutions alternatives

1. Positionnement absolu avec CSS

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

2. Mise à l'échelle proportionnelle avec les requêtes multimédias 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 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");
});

Surmonter les défis de l'affichage mobile

Pour permettre à div> de s'asseoir au-dessus de l'image plein écran sur mobile, envisagez d'utiliser Flexbox ou CSS Grid et le positionnement absolu.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!