Bootstrap - Object Fit : Un Guide Complet Pour Les Débutants

Bonjour à tous, futurs développeurs web ! Aujourd'hui, nous allons plonger dans le monde merveilleux de la propriété object-fit de Bootstrap. En tant que votre enseignant informatique de quartier, je suis excité de vous guider à travers ce sujet pas à pas. À la fin de ce tutoriel, vous serez en mesure de faire entrer les objets comme un pro !

Qu'est-ce que Object Fit ?

Avant de nous plonger dans les spécificités de Bootstrap, comprenstons ce qu'est object-fit. Imaginez que vous essayez de faire entrer une grande photo rectangulaire dans un petit cadre carré. Vous avez quelques options :

1. Étirez la photo (mais elle pourrait paraître déformée)
2. Coupez une partie de la photo
3. Réduisez la photo, laissant de l'espace vide autour

Object-fit est comme avoir un cadre magique qui peut faire toutes ces choses et plus encore !

Bootstrap et Object Fit

Bootstrap, notre framework front-end bienveillant, nous offre des classes pour appliquer facilement les propriétés object-fit à nos images et vidéos. Explorons ces classes et voyons-les en action !

Les Classes de Base

Bootstrap propose cinq classes object-fit :

Classe	Description
.object-fit-contain	Fait entrer l'objet entier dans le conteneur tout en conservant le rapport largeur-hauteur
.object-fit-cover	Couvre tout le conteneur, potentiellement rognant l'objet
.object-fit-fill	Étire l'objet pour remplir le conteneur, peut-être en le déformant
.object-fit-scale	Redimensionne l'objet aussi grand que possible sans rognage ni étirement
.object-fit-none	Ignore la taille du conteneur, utilise la taille originale de l'objet

Voyons ces classes en action avec quelques exemples !

Exemple 1 : Object Fit Contain

<img src="wide-landscape.jpg" class="object-fit-contain border rounded" alt="Paysage">

Dans cet exemple, nous utilisons .object-fit-contain sur une image de paysage large. L'image s'adaptera entirely dans son conteneur, en conservant son rapport largeur-hauteur. Si le conteneur est plus haut que l'image, vous verrez un espace vide au-dessus et en dessous de l'image.

Exemple 2 : Object Fit Cover

<img src="tall-portrait.jpg" class="object-fit-cover border rounded" style="width: 200px; height: 200px;" alt="Portrait">

Ici, nous utilisons .object-fit-cover sur une image de portrait grande. L'image remplira tout le conteneur, mais une partie de celle-ci pourrait être rognée en haut et en bas.

Exemple 3 : Object Fit Fill

<img src="square-logo.jpg" class="object-fit-fill border rounded" style="width: 300px; height: 150px;" alt="Logo">

Avec .object-fit-fill, notre logo carré est étiré pour s'adapter à un conteneur rectangulaire. Il pourrait paraître un peu déformé, mais il remplira complètement l'espace.

Object Fit Réactif

Maintenant, parlons de rendre nos propriétés object-fit réactives. Bootstrap nous permet d'appliquer différentes classes object-fit selon la taille de l'écran. C'est super pratique pour créer des layouts qui ont l'air géniaux sur les mobiles comme sur les ordinateurs de bureau !

Classes Réactives

Bootstrap propose des variantes réactives des classes object-fit :

Classe	Description
.object-fit-sm-*	S'applique à partir du point de bascule small
.object-fit-md-*	S'applique à partir du point de bascule medium
.object-fit-lg-*	S'applique à partir du point de bascule large
.object-fit-xl-*	S'applique à partir du point de bascule extra large
.object-fit-xxl-*	S'applique à partir du point de bascule extra extra large

Exemple 4 : Object Fit Réactif

<img src="versatile-image.jpg" class="object-fit-cover object-fit-sm-contain object-fit-md-fill border rounded" alt="Image polyvalente">

Dans cet exemple, notre image :

• Utilise cover sur les écrans extra small (téléphones mobiles)
• Passe à contain sur les écrans small (tablettes)
• Utilise fill sur les écrans medium et plus grands (ordinateurs de bureau)

Cela nous permet d'optimiser l'affichage de l'image en fonction de la taille de l'écran. Pretty neat, right?

Object Fit avec les Vidéos

Object-fit n'est pas seulement pour les images - il fonctionne aussi très bien avec les vidéos ! Voyons comment nous pouvons l'utiliser pour rendre notre contenu vidéo fantastique.

Exemple 5 : Vidéo avec Object Fit

<video class="object-fit-contain w-100" autoplay loop muted>
<source src="cool-video.mp4" type="video/mp4">
Votre navigateur ne supporte pas la balise video.
</video>

Dans cet exemple, nous utilisons .object-fit-contain pour nous assurer que notre vidéo s'adapte dans son conteneur tout en conservant son rapport largeur-hauteur. La classe w-100 fait que la vidéo occupe 100% de la largeur de son conteneur.

Exemple 6 : Vidéo Object Fit Réactive

<video class="object-fit-cover object-fit-md-contain w-100" style="height: 300px;" autoplay loop muted>
<source src="awesome-video.mp4" type="video/mp4">
Votre navigateur ne supporte pas la balise video.
</video>

Ici, nous utilisons une combinaison de .object-fit-cover et .object-fit-md-contain. Sur les petits écrans, la vidéo couvrira son conteneur (et pourrait rogner une partie du contenu), mais sur les écrans medium et plus grands, elle passera en mode contain, montrant la vidéo complète sans rognage.

Conclusion

Et voilà, les amis ! Nous avons exploré les inside et outside de classes object-fit de Bootstrap. De l'ajustement de base des images à la vidéo réactive, vous avez maintenant les outils pour rendre votre contenu média fantastique sur n'importe quel appareil.

Souvenez-vous, le développement web est tout à fait expérimental. N'ayez pas peur de mélanger ces classes pour voir ce qui fonctionne le mieux pour votre projet. Qui sait ? Vous pourriez découvrir une combinaison qui rendra votre site web le sujet de conversation de la ville !

En conclusion, je me souviens d'un étudiant qui m'a dit un jour : "Object-fit est comme essayer de rentrer dans tes vieilles jeans après les vacances - parfois tu dois contenir, parfois tu dois couvrir, et parfois tu dois juste remplir !" Bien dit, jeune padawan, bien dit.

Continuez à pratiquer, continuez à apprendre, et surtout, continuez à vous amuser avec le développement web. Jusqu'à la prochaine fois, bon codage !

Credits: Image by storyset