Rumah >hujung hadapan web >html tutorial >html怎么设置图片大小

html怎么设置图片大小

青灯夜游
青灯夜游asal
2021-05-06 14:48:4934497semak imbas

方法:1、利用img标签的width和height属性,语法“36f2d2bfa06f7b01bf0b9df3636b8ef7”;2、利用css的width和height属性,语法“img{width:值;height:值}”。

html怎么设置图片大小

本教程操作环境:windows7系统、CSS3&&HTML5版、Dell G3电脑。

方法1:利用img标签的width和height属性

a1f02c36ba31691bcfe87b2722de723b 标签的 height 和 width 属性设置图像的尺寸。

<img src="img/1.jpg" width="200" height="200"/>

1.png

为什么要使用 height 和 width 属性

您是否见过当文档加载时其内容会显示不规律的移动。之所以会这样,是因为浏览器为了能够显示每一个加载的图像,而不断地重新调整页面的布局。浏览器通过下载并解析出图像的宽度和高度来决定图像的大小,然后就会在显示窗口中留出一个相应的矩形空间。然后浏览器就会调整页面的显示布局,以便把图像插入到显示当中。这同时也告诉我们,图像是独立的文件,它与源文件都分别是独立加载的。

但是这不是一种最有效的显示文档的方法,因为浏览器在显示相邻的以及后面的文档内容之前,必须要检查每一个图像文件,并计算它们的屏幕空间。这可能会给文档的显示带来非常大的延迟,从而打断用户的阅读。

对于创作者来说,一种更为有效的方法是通过 a1f02c36ba31691bcfe87b2722de723b 标签的 height 和 width 属性来指定图像的尺寸。这样的话,浏览器在下载图像之前就为其预留出了位置,从而可以加速文档的显示,还可以避免文档内容的移动。这两个属性都要求是整数值,并以像素为单位来表示图像尺寸。这两个属性在 a1f02c36ba31691bcfe87b2722de723b 标签中出现的次序并不重要。

height 和 width 属性的问题

虽然 a1f02c36ba31691bcfe87b2722de723b 标签的 height 和 width 属性能够改善性能并让你实现一些小技巧,但在使用它们时还是有一些棘手的负面效果。即使用户已经关掉了自动下载图像的功能,浏览器还是要把为图像预留的空间以指定的尺寸显示出来。而这样留给读者的通常是一个空的框架,里面有一个毫无意义的图标,表示这是放置图像的位置。这时页面将看上去非常糟糕,就像根本没有完成一样,并且大部分内容都毫无用处。如果不用这些指定的尺寸,则浏览器将只是在文本中放置一个图像图标,这样显示中至少还有一些文字可以阅读。

推荐教程:《html视频教程

方法2:利用css的width和height属性

width属性设置元素的宽度,height属性设置元素的高度。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<style>
			img{
				width:200px ;
				height: 200px;
			}
		</style>
	</head>
	<body>
		<img src="img/1.jpg"/>
	</body>
</html>

2.png

更多编程相关知识,请访问:编程视频!!

Atas ialah kandungan terperinci html怎么设置图片大小. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Kenyataan:
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Artikel sebelumnya:html怎么加视频Artikel seterusnya:html怎么点击图片跳转页面