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">
<pre class="brush:php;toolbar:false">@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 class="background-image lazy" src="/static/imghwm/default1.png" data-src="bg.jpg" alt="">

  $(document).ready(function() {
    scaleBackground();
  });
  
  $(window).resize(function() {
    scaleBackground();
  });
  
  function scaleBackground() {
    var windowWidth = $(window).width();
    var windowHeight = $(window).height();
  
    if (windowWidth / windowHeight 

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