Comment redimensionner la hauteur d'une image à recadrer avec la fenêtre du navigateur?

Question

J'ai une image que je veux couvrir toute la fenêtre de mon navigateur lors du chargement du site. Je l'ai fait de sorte que, comme la largeur de la fenêtre du navigateur augmente ou diminue, l'image est redimensionnée tout en préservant l'alignement du centre et le ratio d'aspect en recadrant de chaque côté. Cependant, je veux que, comme la hauteur de la fenêtre du navigateur augmente ou diminue, l'image est recadrée à partir du bas de sorte que le bas de l'image s'aligne toujours avec le bas de la fenêtre du navigateur et le haut de la l'image n'est jamais coupée. En d'autres termes, lorsque je défile vers le bas, il ne devrait plus y avoir d'image sous la fenêtre du navigateur pour faire défiler la page. J'ai le code HTML et CSS suivant:

HTML:

<div class="hs-slide hs-slide-count<?php echo $i; ?>"> 
     <div class="hs-slide-overlay"></div> 
     <img src="<?php echo esc_url($hashone_slider_image); ?>" class="banner"> 
     <div class="hs-slide-caption"> 
     <div class="hs-slide-cap-title animated fadeInLeft"> 
      <?php echo esc_html($hashone_slider_title); ?> 
     </div> 

     <div class="hs-slide-cap-desc animated fadeInRight"> 
      <?php echo esc_html($hashone_slider_subtitle); ?> 
     </div> 
     </div> 
    </div> 

CSS:

img.banner{ 
    /* Set rules to fill background */ 
    min-height: 100%; 
    min-width: 1024px; 
    /* Set up proportionate scaling */ 
    width: 100%; 
    height: auto; 
    /* Set up positioning */ 
    position: relative; 
    top: 0; 
    left: 0; 
    z-index: -1; 
} 
@media screen and (max-width: 1024px) { /* Specific to this particular image */ 
    img.banner { 
left: 50%; 
margin-left: -512px; /* 50% */ 
    } 
} 

Comment puis-je faire, idéalement sans JavaScript? En outre, j'ai obtenu le CSS d'un guide sur le remplissage de la fenêtre du navigateur avec une image, et je ne sais pas pourquoi la min-largeur dans le HTML est spécifiquement fixé à 1024px.

Answer 1

Mise à jour:

Exemple: https://jsfiddle.net/jbx8nco4/4/

Description spécifique à votre code: Vous devez retirer la <img> à l'intérieur du conteneur .hs-slide et utiliser à la place un background-image. Après avoir ajouté l'image d'arrière-plan à .hs-slide (voir le code ci-dessous), l'élément .hs-slide a besoin d'une hauteur pour être visible. Vous pouvez en définir explicitement un ou laisser l'élément s'adapter à la hauteur de son contenu. Pour ce dernier, vous devez supprimer tout positionnement de .hs-slide-caption et lui donner un rembourrage-haut et rembourrage-fond. Par souci de simplicité, je me suis fixé une hauteur explicite dans l'exemple:

.hs-slide { 
    height: 800px; 
    background-image: url(http://placekitten.com/1000/500); /* replace with your image */ 
    background-repeat: no-repeat; 
    background-size: cover; 
    background-position: center top; 
} 

La notation abrégée de ce code serait:

background: url(//placekitten.com/1000/500) center top/cover no-repeat; 

Le background-attachment: fixed je l'ai mentionné dans la première version de mon commentaire n'est pas nécessaire comme vous voulez que l'image défile avec votre page. Par ailleurs: comme vous avez maintenant deux images d'arrière-plan, l'une faisant partie du .hs-slide-overlay, vous pouvez essayer de vous débarrasser de la superposition en combinant les deux images d'arrière-plan en utilisant the notation for multiple background-images.

ancienne réponse:

Je ne suis pas complètement sûr, mais cela ressemble à ce que vous voulez peut être réalisé en utilisant un CSS background-image. Je ne peux pas penser à une solution sans Javascript utilisant la balise HTML img.

Vous devez ajouter l'image d'arrière-plan à tout élément s'étendant sur toute la largeur et la hauteur de la fenêtre, puis définir les attributs appropriés, le plus important étant background-size et background-position.

body { 
    width: 100%; 
    height: 100%; 
    background-image: url(//placekitten.com/1000/500); 
    background-repeat: no-repeat; 
    background-size: cover; // cover the whole area with the image 
    background-position: top; // expand image from the top 
    background-attachment: fixed; 
} 

La version abrégée pour les propriétés de fond serait:

background-image: url(//placekitten.com/1000/500) no-repeat top fixed; 
background-size: cover; 

Voici un exemple en direct: https://jsfiddle.net/jbx8nco4/2/

Gardez à l'esprit que background-size: cover est pas pris en charge par les navigateurs plus anciens.

Pour plus d'informations et plus techniques sur l'utilisation de fond-images pour couvrir la voir pleine page: https://css-tricks.com/perfect-full-page-background-image/