Mettre une image à l'échelle en HTML

1. Mettre à l’échelle une image de grande taille dans la fenêtre du navigateur en HTML
2. Utiliser les propriétés width et min-width pour redimensionner une image en HTML

Dans ce tutoriel, nous allons illustrer des méthodes pour mettre à l’échelle des images de grande taille en HTML.

Mettre à l’échelle une image de grande taille dans la fenêtre du navigateur en HTML

Nous pouvons redimensionner une grande image en HTML en utilisant les propriétés width et height dans l’image. Une image de grande taille sortira du bord de l’écran. Pour redimensionner l’image à la taille de la fenêtre, nous pouvons utiliser un conteneur et définir ses propriétés height et width sur la hauteur et la largeur de la fenêtre. Nous pouvons utiliser les unités vh et vw pour définir la taille. Une unité de vh et vw correspond à 1 % de la hauteur et de la largeur de la fenêtre. Nous pouvons définir la hauteur et la largeur de l’image en utilisant le réglage sur 100%. L’image doit être insérée à l’intérieur du conteneur. Ensuite, l’image de grande taille s’adaptera à la fenêtre.

Par exemple, créez un div en HTML avec la classe container. À l’intérieur du div écrivez la balise img et insérez une image de grande taille. En CSS, sélectionnez la classe container et réglez sa height et sa width sur 100vh et 100vw. Ensuite, sélectionnez la balise img et définissez sa height et sa width sur 100%.

Dans l’exemple ci-dessous, nous mettons à l’échelle une grande image pour qu’elle s’adapte à la fenêtre en utilisant des unités telles que vh, vw et %.

Exemple de code :

<div class="container">
    <img src="https://images.all-free-download.com/images/graphiclarge/large_mushroom_199318.jpg" >
</div>

.container{
  height:100vh;
  width: 100vw;
}
img {
 width : 100%;
 height: 100%; 
}

Utiliser les propriétés width et min-width pour redimensionner une image en HTML

Nous pouvons utiliser les propriétés width et min-width pour redimensionner une image en HTML. Nous pouvons utiliser ces propriétés tout en stylisant la balise <img>. La propriété width spécifie la largeur de l’élément. La propriété min-width spécifie la largeur minimale de l’élément. Il ne sera appliqué que si le contenu est inférieur à la largeur minimale. Sinon, cette propriété n’aura aucun effet. De plus, cette propriété empêche également la valeur de la propriété width d’être inférieure à min-width. Nous désignons la width et la largeur minimale en pixels dans cette méthode.

Par exemple, à l’intérieur du corps HTML, écrivez la balise <img>. A l’intérieur de la balise <img>, spécifiez le chemin d’accès à l’image par l’attribut src. Ensuite, donnez width de 25vw et min-width de 140px dans l’attribut style. Ensuite, fermez la balise <img> suivie de toutes les balises précédemment ouvertes.

Nous avons utilisé les propriétés width et min-width pour redimensionner l’image. L’image de grande taille qui ne tient pas dans la fenêtre peut tenir dans la fenêtre. La largeur 25vw dans l’exemple ci-dessous montre que la largeur correspond à 25 % de la largeur de la fenêtre. De cette façon, nous pouvons redimensionner l’image en utilisant la balise style en HTML.

Exemple de code :

<img src="/img/DelftStack/logo.png" style="width: 25vw; min-width: 140px;" />