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

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

Mary-Kate Olsen

Libérer： 2024-11-16 13:57:03

original

523 Les gens l'ont consulté

How To Fix a Full-Screen Responsive Background Image That Gets Cropped?

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>

Copier après la connexion

.main-header {
  background-image: url(../img/bb-background2.png);
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  width: 100%;
  height: 100%;
}

Copier après la connexion

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

Copier après la connexion

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

Copier après la connexion

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

Copier après la connexion