Maison > interface Web > Questions et réponses frontales > Comment définir la position de l'image en HTML

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

青灯夜游
Libérer: 2023-01-05 16:13:31
original
43295 Les gens l'ont consulté

Comment définir la position de l'image en HTML : ajoutez d'abord le style "position:absolute;" à l'élément image et définissez le positionnement absolu de l'image, puis utilisez l'attribut left pour définir la distance entre la gauche ; la limite de marge de l'élément de positionnement et la limite gauche de son bloc conteneur Offset ; utilisez enfin l'attribut top pour définir le décalage supérieur de l'élément positionné.

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

L'environnement d'exploitation de ce tutoriel : système Windows 7, version CSS3&&HTML5, ordinateur Dell G3.

Html définir la position de l'image

<!DOCTYPE html>
<html>
	<head>
	</head>

	<body>
		<img  src="img/1.jpg"    style="max-width:90%"  style="max-width:90%" / alt="Comment définir la position de l'image en HTML" >
		<!--这里的图片路径我放在网页的当前目录-->
	</body>

</html>
Copier après la connexion

Position de l'image par défaut :

Comment définir la position de limage en HTML

Utilisez le code suivant pour définir Après la position de l'image

/*设置图片的属性*/
img {
position: absolute;
/*绝对位移*/
left: 300px;
/*left 属性规定元素的左边缘。该属性定义了定位元素左外边距边界与其包含块左边界之间的偏移。*/
top: 150px;
/*top 属性规定元素的顶部边缘。该属性定义了一个定位元素的上外边距边界与其包含块上边界之间的偏移。*/
}
Copier après la connexion

Rendu :

Comment définir la position de limage en HTML

Tutoriel recommandé : "Tutoriel vidéo HTML"

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!

Étiquettes associées:
source:php.cn
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal