Comment créer une image d'arrière-plan réactive en plein écran à l'aide de Foundation ?

Création d'une image d'arrière-plan réactive en plein écran

En tant que novice en développement front-end, vous rencontrez des défis pour parvenir à un développement complet -image d'arrière-plan réactive à l'écran utilisant le framework Foundation. Votre code CSS met l'image à l'échelle de manière appropriée mais ne parvient pas à afficher l'intégralité de l'image. De plus, vous souhaitez positionner votre div .large-6 large-offset-6 columns au-dessus de l'image d'arrière-plan sur les appareils mobiles.

Pour répondre à vos préoccupations, examinons votre implémentation HTML et CSS et explorons des solutions alternatives :

Approche HTML et CSS alternative :

Pour une mise en œuvre plus simple, considérez ce qui suit code :

<div class="main-header">

@media screen and (max-width: 768px) {
  .reorder-on-mobile {
    order: -1;
  }
}

En ajoutant la hauteur : 100% ; débordement : caché ; à .main-header, l’image entière sera visible sans défilement. La classe de réorganisation sur mobile et la requête multimédia qui l'accompagne garantissent que les colonnes .large-6 large-offset-6 apparaissent au-dessus de l'image d'arrière-plan sur les appareils mobiles en ajustant leur ordre d'affichage.

Solutions d'arrière-plan complètes :

Vous pouvez également explorer les solutions complètes suivantes pour créer un arrière-plan réactif en plein écran images :

• astuces CSS : image d'arrière-plan parfaite d'une page complète : https://css-tricks.com/perfect-full-page-background-image/

• Utiliser JavaScript pour gérer le dimensionnement des images et positionnement :

  <img src="bg.jpg" class="background-image" alt="" />

  $(document).ready(function() {
    scaleBackground();
  });
  
  $(window).resize(function() {
    scaleBackground();
  });
  
  function scaleBackground() {
    var windowWidth = $(window).width();
    var windowHeight = $(window).height();
  
    if (windowWidth / windowHeight < 0.5625) { // Aspect ratio of your image
      $(".background-image").height(windowHeight);
      $(".background-image").width(windowWidth / 0.5625);
    } else {
      $(".background-image").width(windowWidth);
      $(".background-image").height(windowHeight / 0.5625);
    }
  }

  En comprenant les principes sous-jacents et en employant ces techniques, vous pouvez créer des images d'arrière-plan réactives qui améliorent l'attrait visuel et l'expérience utilisateur de vos applications front-end. .

  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!