Comment définir la taille de l'image en HTML-tutoriel HTML-php.cn

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

青灯夜游

Libérer： 2021-05-20 11:38:16

original

34492 Les gens l'ont consulté

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}".

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

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

Comment définir la taille de l'image en HTML 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" >

Copier après la connexion

Comment définir la taille de limage 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 Comment définir la taille de l'image en HTML 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 Comment définir la taille de l'image en HTML

Problèmes avec les attributs de hauteur et de largeur

Bien que les attributs de hauteur et de largeur de la balise Comment définir la taille de l'image en HTML 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>

Copier après la connexion

Comment définir la taille de limage en HTML