Dans le cours : HTML : Les images responsive

Accédez au cours complet aujourd’hui

Inscrivez-vous aujourd’hui pour accéder à plus de 23 100 cours dispensés par des experts.

Utiliser la propriété objet-fit

Utiliser la propriété objet-fit - Tutoriel HTML

Dans le cours : HTML : Les images responsive

Démarrer mon mois d’essai gratuit Acheter pour mon équipe

Utiliser la propriété objet-fit

“

Alors voici une autre situation très courante. Nous avons ici une série d'éléments, imaginons que ce sont les produits que l'on vante sur notre site web, et pour chaque produit, nous avons une image, un petit texte et un bouton. Le problème, c'est que ces images ont toutes des tailles différentes, ou plutôt, elles ont toutes un rapport de formes différents, un aspect ratio différent. Certaines sont plutôt carrées, d'autres sont plutôt allongées, certains sont en portrait, d'autres en paysage, et donc le résultat, c'est que mes produits ne sont pas tous présentés de manière identique, et ça, ce n'est pas très joli. Donc, direction notre éditeur de code, nous avons cette page HTML avec une feuille de style CSS qui régit l'apparence générale de ces éléments, nous, on va se concentrer exclusivement sur le problème de la taille de ces images. Je vais commencer par leur donner une taille fixe, avec la propriété Width du CSS, une largeur de 350 pixels, et avec la propriété HIGHT du CSS, une…

Table des matières