Comment redimensionner l'image dans CSS

Lors du développement d'un site Web, nous utilisons souvent les images téléchargées depuis Internet. Cependant, il existe une chance que l'image téléchargée ne soit pas de la bonne taille. Dans une telle situation, la solution idéale consiste à redimensionner l'image souhaitée.

Il existe différentes façons de redimensionner une image; Optez pour CSS lorsqu'il s'agit de trouver le moyen le plus rapide et le plus efficace. CSS propose différentes propriétés qui peuvent être utilisées pour redimensionner les images en fonction de vos préférences.

Cet article démontrera les méthodes de redimensionnement des images à l'aide de CSS.

Comment redimensionner une image dans CSS?

Dans CSS, vous pouvez utiliser les propriétés suivantes pour redimensionner une image:

• Propriétés de hauteur et de largeur
• propriété d'objet
• propriété de la taille de l'arrière-plan

Nous passerons par chacune des méthodes mentionnées une par une!

Méthode 1: Utilisez des propriétés de hauteur et de largeur pour redimensionner l'image dans CSS

Dans CSS, la propriété de hauteur est utilisée pour ajuster la hauteur des éléments HTML. De la même manière, la propriété de largeur est très utile pour l'ajustement de la largeur des éléments.

Si vous êtes seulement disposé à changer le «hauteur”De l'image, puis consultez la syntaxe suivante:

hauteur: 85%;

Ici, "85%»Représente la valeur de la propriété de hauteur.

Cependant, pour changer l'image "largeur», Définissez sa valeur en fonction de vos préférences:

Largeur: 85%;

Note: En utilisant le "auto"Comme la valeur des propriétés de hauteur et de largeur aidera à maintenir la réactivité de l'image en ce qui concerne différents appareils.

Cependant, parfois, il est nécessaire de redimensionner l'image horizontalement et verticalement. Si tel est le cas, vous pouvez affecter une valeur spécifique aux propriétés de hauteur et de largeur.

Exemple

Dans cet exemple, nous redimensions l'image suivante:

Maintenant, pour redimensionner l'image donnée, nous définirons la valeur de la propriété de hauteur comme «55%"Et la largeur comme"70%”Dans le fichier CSS:

Spécifiez la source d'image "SRC" dans le "”Tag du fichier html:

Nous avons réussi à redimensionner l'image en utilisant les propriétés mentionnées.

Méthode 2: Utilisez une propriété d'objet pour redimensionner l'image dans CSS

Dans CSS, le «ajustement d'objet»La propriété est utilisée pour ajuster automatiquement une image à son conteneur. En utilisant cette propriété, nous pouvons faire une image dans le conteneur avec les valeurs enrôlées:

• remplir: Si l'image est étirée par rapport au conteneur, il peut être redimensionné pour s'adapter dans le conteneur.
• contenir: En utilisant cette valeur de propriété, l'image sélectionnée maintient son rapport d'aspect; Cependant, il est redimensionné pour tenir dans le conteneur.
• couverture: Il permet à l'image de couvrir l'ensemble du conteneur.
• aucun: La taille de l'image reste la même.
• Échelle: Lorsque la valeur de propriété d'objet d'objet est définie sous forme d'échelle, il vérifie si l'image doit rester de la même taille ou être redimensionnée pour s'adapter dans le conteneur.

Exemple

Nous utiliserons la même image et définirons sa valeur d'objet-propriété que «contenir". En conséquence, l'image sélectionnée conservera son rapport d'aspect mais est redimensionnée pour s'adapter dans le même conteneur:

Image avec succès dans le conteneur. Cependant, vous pouvez utiliser la couverture, le remplissage ou l'échelle pour atteindre la dimension de l'image souhaitée:

Méthode 3: Utilisez une propriété de taille arrière pour redimensionner l'image dans CSS

Pour redimensionner une image d'arrière-plan dans CSS, vous pouvez simplement utiliser le «taille de l'arrière-plan" propriété. Cette propriété est idéale pour l'ajustement des images d'arrière-plan.

Avant de sauter plus profondément, jetez un œil à la description de ses différentes valeurs:

• auto(Valeur par défaut): en définissant la propriété de taille arrière comme «auto», L'image restera dans sa taille d'origine.
• couverture: Cette valeur oblige l'image à couvrir l'ensemble du conteneur en cas d'espace.
• contenir: Pour vous assurer que l'image est entièrement visible, utilisez "contenir”Comme valeur de la propriété de la taille de l'arrière-plan.

Exemple

Nous allons maintenant redimensionner le «Image.PNG«En définissant la valeur de sa propriété de taille arrière comme«contenir". De plus, pour éviter la répétition de l'image, nous allons utiliser le «Répétition du fond«Propriété et définissez sa valeur sur«sans répétition". De plus, "250px”Un rembourrage est nécessaire pour remplir le contenu à l'intérieur du conteneur.

Ici, l'exemple est un «identifiant" de la "div" récipient:

Ensuite, attribuer le «exemple”ID au et ajouter du texte en utilisant

étiqueter:

TEXTE

La valeur spécifiée de la propriété de taille arrière rendra l'image entièrement visible. Cependant, vous pouvez définir n'importe quelle valeur en fonction de vos préférences:

Nous avons fourni les instructions nécessaires liées à la redimensionnement d'une image dans CSS.

Conclusion

Pour redimensionner l'image à l'aide de CSS, vous pouvez utiliser la propriété de hauteur ou de largeur. La propriété d'objet CSS peut également aider à ajuster une image en ce qui concerne son conteneur. L'utilisation de la propriété d'objet-objet vous aidera à effectuer une résistance automatique à l'image. De plus, la propriété de la taille de l'arrière-plan peut également être utilisée à l'objectif mentionné. Cet article a décrit les deux méthodes efficaces de redimensionnement d'une image dans CSS.