Parfois, il est nécessaire d’adapter une image à une certaine dimension donnée. Nous pouvons redimensionner l'image en spécifiant la largeur et la hauteur d'une image. Une solution courante consiste à utiliser le largeur maximale : 100 % ; et hauteur : automatique ; afin que les grandes images ne dépassent pas la largeur de leur conteneur. Le largeur maximale et hauteur maximum Les propriétés CSS fonctionnent mieux, mais elles ne sont pas prises en charge dans de nombreux navigateurs.
Une autre façon de redimensionner l'image consiste à utiliser le ajustement à l'objet propriété , qui correspond à l’image. Cette propriété CSS spécifie comment une vidéo ou une image est redimensionnée pour s'adapter à sa zone de contenu. Il définit comment un élément s'insère dans le conteneur avec une largeur et une hauteur établies.
Le ajustement à l'objet la propriété est généralement appliquée à une image ou à une vidéo. Cette propriété définit comment un élément répond à la largeur et à la hauteur de son conteneur. Il existe principalement cinq valeurs de ajustement à l'objet des biens tels que remplir, contenir, couvrir, aucun, réduire, initialiser , et hériter . La valeur par défaut de cette propriété est 'remplir' .
Exemple
Dans cet exemple, nous redimensionnons l'image en utilisant le largeur maximale : 100 % ; et hauteur : automatique ; propriétés.
cell padding div { width: auto; text-align: center; padding: 15px; border: 3px solid red; } img { max-width: 100%; height: auto; } <img src="forest.webp"> Testez-le maintenant Sortir
Exemple
Dans cet exemple, nous utilisons le ajustement de l'objet : couverture ; propriété.
div { width: 300px; height: auto; text-align: center; padding: 15px; border: 3px solid red; } img { object-fit: cover; } <img src="forest.webp" width="300" height="300"> Testez-le maintenant Sortir
Dans l'exemple ci-dessus, nous avons utilisé le couverture valeur de la ajustement à l'objet propriété. Semblable à l’exemple ci-dessus, nous pouvons utiliser les autres valeurs de ajustement à l'objet propriété afin de redimensionner l’image.