Maison > Article > interface Web > Comment définir la taille de l'image en HTML
Comment définir la taille de l'image en HTML
- 青灯夜游original
- 2021-05-06 14:48:4934449parcourir
Méthode : 1. Utilisez les attributs width et height de la balise img, la syntaxe "
" 2. Utilisez les attributs CSS width et height, syntaxe "img{width: value; height: value}".
L'environnement d'exploitation de ce tutoriel : système Windows 7, version CSS3&&HTML5, ordinateur Dell G3.
Méthode 1 : Utiliser les attributs width et height de la balise img
la taille de l'image.
<img src="img/1.jpg" style="max-width:90%" style="max-width:90%"/ alt="Comment définir la taille de l'image en HTML" >
Pourquoi utiliser les propriétés de hauteur et de largeur
Avez-vous déjà vu que lorsqu'un document charge, son contenu apparaît irrégulièrement ? Cela se produit parce que le navigateur réorganise constamment la page afin de pouvoir afficher chaque image chargée. Le navigateur détermine la taille de l'image en téléchargeant et en analysant la largeur et la hauteur de l'image, puis laisse un espace rectangulaire correspondant dans la fenêtre d'affichage. Le navigateur ajuste ensuite la disposition d'affichage de la page pour insérer l'image dans l'affichage. Cela nous indique également que l'image est un fichier indépendant et qu'elle est chargée indépendamment du fichier source.
Mais ce n'est pas le moyen le plus efficace d'afficher un document, car le navigateur doit vérifier chaque fichier image et calculer son espace à l'écran avant d'afficher le contenu du document adjacent et ultérieur. Cela peut entraîner un retard très important dans l'affichage du document, interrompant la lecture de l'utilisateur.
Une approche plus efficace pour les créateurs consiste à spécifier les dimensions de l'image via les attributs de hauteur et de largeur de la balise Dans ce cas, le navigateur réserve un emplacement pour l'image avant de la télécharger, accélérant ainsi l'affichage du document et empêchant le contenu du document de bouger. Les deux propriétés doivent être des valeurs entières et représenter les dimensions de l'image en pixels. L'ordre dans lequel ces deux attributs apparaissent dans la balise
Problèmes avec les attributs de hauteur et de largeur
Bien que les attributs de hauteur et de largeur de la balise un problème lors de leur utilisation. Il existe encore des effets négatifs délicats. Même si l'utilisateur a désactivé le téléchargement automatique des images, le navigateur doit toujours afficher l'espace réservé à l'image dans la taille spécifiée. Cela laisse généralement au lecteur un cadre vide avec une icône dénuée de sens indiquant que c'est là que l'image doit être placée. À ce stade, la page aura un aspect vraiment mauvais, comme si elle n'était pas terminée du tout, et la plupart du contenu sera inutile. Si vous n'utilisez pas ces tailles spécifiées, le navigateur placera simplement une icône d'image dans le texte afin qu'au moins une partie du texte soit toujours lisible à l'écran.
Tutoriel recommandé : "Tutoriel vidéo HTML"
Méthode 2 : Utiliser les attributs width et height de css
width attribut Définit la largeur de l'élément et l'attribut hauteur définit la hauteur de l'élément.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
img{
width:200px ;
height: 200px;
}
</style>
</head>
<body>
<img src="img/1.jpg"/ alt="Comment définir la taille de l'image en HTML" >
</body>
</html>
Pour plus de connaissances sur la programmation, veuillez visiter : Vidéo de programmation ! !
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!