Comment définir la taille de l'image en HTML

HTML est un langage de balisage utilisé pour créer des pages Web. Il peut ajouter divers éléments et contenus aux pages Web, notamment du texte, des images, de l'audio et de la vidéo, etc. Parmi elles, les images sont un élément courant dans les pages Web, mais nous devons parfois contrôler la taille des images pour les rendre plus adaptées à la mise en page du contenu Web. Dans cet article, nous explorerons comment définir la taille des images à l'aide de HTML.

Balises d'image en HTML

En HTML, nous utilisons l'élément img pour ajouter des images aux pages Web. L'élément img possède un attribut src, qui est utilisé pour spécifier l'adresse URL du fichier image. Par exemple, pour ajouter une image nommée « exemple.jpg » à une page web, on peut utiliser le code suivant :

<img src="example.jpg">

De cette façon, le navigateur affichera l'image dans la page web. Cependant, cette image peut avoir une taille différente de celle attendue, nous devons donc utiliser d'autres propriétés pour contrôler la taille d'affichage de l'image.

Définir la taille de l'image

HTML fournit deux attributs principaux pour définir la taille d'affichage des images : la largeur et la hauteur. Ces deux propriétés sont utilisées pour définir respectivement la largeur et la hauteur de l'image en pixels. Par exemple, pour définir la largeur d'une image à 200 pixels, vous pouvez utiliser le code suivant :

<img src="example.jpg" width="200">

De même, pour définir la hauteur d'une image à 150 pixels, vous pouvez utiliser le code suivant :

<img src="example.jpg" height="150">

De cette façon , l'image suivra la largeur et la hauteur spécifiées à afficher. Il convient de noter que si une seule des propriétés est définie, le navigateur redimensionnera automatiquement l'image proportionnellement pour l'adapter à la valeur de l'autre propriété. Par exemple, si seul l'attribut width est défini, le navigateur calculera automatiquement la valeur de hauteur correspondante en fonction du rapport largeur/hauteur de l'image d'origine.

Définir la largeur et la hauteur simultanément

En plus de définir la largeur et la hauteur séparément, vous pouvez également définir ces deux propriétés en même temps. Dans ce cas, l'image sera étirée ou compressée pour s'adapter à la taille spécifiée par les deux propriétés. Par exemple, le code suivant définit la largeur de l'image à 200 pixels et la hauteur à 150 pixels :

<img src="example.jpg" width="200" height="150">

De cette façon, la taille de l'image est définie à 200 pixels sur 150 pixels. Il convient de noter que le réglage simultané de la largeur et de la hauteur peut entraîner une déformation de l'image, affectant ainsi l'effet d'affichage de l'image.

Utilisez CSS pour contrôler la taille de l'image

En plus d'utiliser les attributs HTML pour définir la taille de l'image, vous pouvez également utiliser CSS pour contrôler l'effet d'affichage de l'image. Plus précisément, nous pouvons utiliser les propriétés width et height en CSS pour définir la taille de l'image, par exemple :

<img src="example.jpg" style="width:200px;height:150px;">

De même, nous pouvons également définir des styles CSS dans une feuille de style externe, par exemple :

<img src="example.jpg" class="thumbnail">

<style>
.thumbnail {
    width:200px;
    height:150px;
}
</style>

De cette façon, Les éléments d'image de classe « miniature » pourront être utilisés sur tout le site, et leur taille sera fixée à 200 pixels sur 150 pixels.

Conclusion

Définir la taille de l'image en HTML peut nous aider à mieux contrôler l'affichage des images dans les pages Web. Nous pouvons utiliser les attributs width et height pour définir respectivement la largeur et la hauteur de l'image, ou nous pouvons définir ces deux attributs en même temps pour modifier le rapport d'affichage de l'image. De plus, nous pouvons utiliser CSS pour contrôler avec précision la taille des images, rendant ainsi les pages Web plus attrayantes et plus lisibles.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!