CATALOGUE Code & Data Formation XHTML/CSS Apprendre CSS 3

Adapter une Image à la Hauteur du Viewport avec CSS

Retour à la formation
Chapitre 72 Leçon 1
Précédent
Suivant

Apprenez à ajuster une image pour qu'elle s'adapte à 100% de la hauteur de la fenêtre du navigateur en utilisant les unités CSS VH et VW.

Détails de la leçon

Description de la leçon

Dans cette leçon, nous allons vous montrer comment donner une hauteur dynamique à une image afin qu'elle s'ajuste à 100% de la hauteur de la fenêtre de votre navigateur. Historiquement, cette manipulation nécessitait du JavaScript pour calculer et appliquer la hauteur appropriée, mais avec l'introduction de CSS3, cela est devenu beaucoup plus simple. Nous utiliserons l'unité de mesure VH (Viewport Height) qui calcule automatiquement la hauteur de l'image par rapport à la hauteur de la fenêtre.

De plus, nous verrons comment utiliser l'unité VW (Viewport Width) pour manipuler la largeur d'éléments dans notre page et centrer notre contenu en utilisant display: flex et align-items: center. Vous découvrirez également comment assurer que ces ajustements fonctionnent parfaitement sur tous les types de dispositifs, y compris les mobiles.

Objectifs de cette leçon

À la fin de cette vidéo, vous serez capable de :

  • Utiliser les unités VH et VW pour ajuster la taille des éléments en fonction du viewport.
  • Cent l'aligner du contenu verticalement au centre de la page en utilisant flexbox.
  • Créer des mises en page responsive sans utiliser de JavaScript.

Prérequis pour cette leçon

Pour suivre cette vidéo, vous devez avoir une connaissance de base en CSS et comprendre les concepts de responsive design et de flexbox.

Métiers concernés

Les compétences apprises dans cette vidéo sont particulièrement utiles pour les professionnels du web tels que les développeurs front-end, les designers UX/UI, et les intégrateurs web.

Alternatives et ressources

Comme alternatives, vous pouvez explorer des frameworks CSS comme Bootstrap ou Foundation qui offrent des classes préconçues pour la gestion des hauteurs et largeurs de viewport, bien que cela puisse toujours nécessiter des ajustements supplémentaires.

Questions & Réponses

Nous utilisons l'unité VH (Viewport Height) pour ajuster la hauteur d'un élément par rapport à la hauteur du viewport.
Pour centrer un élément verticalement au milieu de la page, nous utilisons display: flex sur son conteneur parent et align-items: center.
Avant l'introduction des unités VH et VW, nous devions utiliser du JavaScript pour calculer et ajuster dynamiquement la hauteur des éléments en fonction du viewport.