Redimensionner l'image en CSS

1. Utilisez les propriétés max-width et max-height pour redimensionner l’image en CSS
2. Utilisez la propriété object-fit pour redimensionner l’image en CSS
3. Utilisez la valeur auto pour la largeur et la propriété max-height pour redimensionner l’image en CSS

Cet article présente des méthodes pour redimensionner une image en CSS pour l’adapter proportionnellement à un div, en conservant sa hauteur et sa largeur.

Utilisez les propriétés max-width et max-height pour redimensionner l’image en CSS

Chaque fois que nous insérons une image en HTML, l’image occupe le nombre total de pixels de sa taille. Si l’image se trouve dans un conteneur spécifique, la taille de l’image peut parfois être supérieure à la taille du conteneur. L’image couvrira plus d’espace sur l’écran ; il prendra des zones d’autres éléments. En conséquence, la page Web ne suivra pas notre conception et sera peu attrayante. Pour se débarrasser de ce problème, nous pouvons utiliser les propriétés CSS max-width et max-height pour redimensionner automatiquement l’image en fonction de la taille du conteneur. Ces propriétés définissent la hauteur et la largeur maximales d’un élément. Si le contenu de l’élément a plus de largeur et de hauteur que les propriétés max-width et max-height, leurs tailles seront ajustées avec la valeur de ces propriétés. Mais, si leurs tailles sont petites, aucun effet n’a lieu. Nous pouvons définir les propriétés max-height et max-width sur un élément, et ainsi, les éléments à l’intérieur du conteneur ajusteront leur taille.

Par exemple, créez un div avec la classe cat en HTML. A l’intérieur du div insérez une image en utilisant la balise <img>. Dans CSS, sélectionnez la balise img et affectez les propriétés max-width et max-height à 100%. Ensuite, sélectionnez la classe cat et donnez height et width de 200px et 200px.

Dans l’exemple ci-dessous, nous avons inséré une image aléatoire de LoremFlickr, qui a 300px de width et height. Mais, le conteneur cat a une hauteur et une largeur de 200px. Comme nous avons utilisé les propriétés max-height et max-width, les images les plus grandes rétrécissent à la taille du conteneur. Ainsi, nous avons redimensionné automatiquement l’image.

Exemple de code :

<div class="cat">
    <img src="/img/DelftStack/logo.png" alt="DelftStack Logo" />
</div>

img {
 max-width: 100%;
 max-height: 100%;
}
.cat {
 height: 200px;
 width: 200px;
}

Utilisez la propriété object-fit pour redimensionner l’image en CSS

Nous pouvons utiliser la propriété object-fit dans CSS pour redimensionner l’image pour l’adapter à son conteneur. Un conteneur peut être plus grand ou plus petit que l’image. La propriété nous permet d’adapter l’image ou les vidéos en fonction de la taille du conteneur. Nous pouvons spécifier la façon dont l’image s’ajuste à l’aide de la propriété object-fit. La propriété prend les valeurs suivantes : fill, contain, cover, none et scale-down. Nous pouvons utiliser la valeur contain pour que l’image la plus grande puisse se réduire à la dimension donnée du conteneur.

Par exemple, insérez une image de 600px de hauteur et de largeur à l’aide de la balise img comme dans le premier exemple. En CSS, sélectionnez la balise et réglez la hauteur et la largeur sur 100%. Utilisez la valeur contain dans l’option object-fit. Ensuite, sélectionnez la classe cat et donnez la hauteur et la largeur de 300px au conteneur.

Ici, nous avons inséré une image d’une dimension plus grande que la taille du conteneur. L’image est 600px alors que le conteneur n’est que 300px. En utilisant la propriété object-fit, nous pouvons réduire l’image aux dimensions du conteneur. Ainsi, nous pouvons redimensionner automatiquement l’image.

Exemple de code :

<div class="cat">
    <img src="/img/DelftStack/logo.png" alt="DelftStack Logo" />
</div>

img {
 height: 100%;
 width: 100%;
 object-fit: contain;
}
.cat {
 height:300px;
 width: 300px;
}

Utilisez la valeur auto pour la largeur et la propriété max-height pour redimensionner l’image en CSS

Nous pouvons utiliser la valeur auto pour la largeur et définir la propriété max-height pour spécifier la largeur d’une image à tenir dans un conteneur. Nous allons réduire la hauteur de l’image à la hauteur du conteneur. Par exemple, insérez une image comme ci-dessus en HTML et définissez la hauteur du conteneur sur 200px en CSS. Ensuite, sélectionnez la balise img, définissez la largeur sur auto et définissez la propriété max-height sur 100%.

Dans l’exemple ci-dessous, l’image a 400px de hauteur et de largeur initialement. Nous avons fixé la hauteur du conteneur à 200px. La propriété max-height définie sur 100 % réduit l’image à 200px. Ainsi, nous avons redimensionné la hauteur de l’image en fonction de la hauteur du conteneur.

Exemple de code :

<div class="cat">
    <img src="/img/DelftStack/logo.png" alt="DelftStack Logo" />
</div>

.cat {
 height:200px
}
img {
 width: auto; 
 max-height: 100%; 
}