HTML`img`标签

探索使用图像和HTML的基础知识img标签,以及如何使它们响应

可以使用img标签。

这个标签接受一个src属性,我们使用它来设置图像源:

<img src="image.png" />

我们可以使用多种图像。最常见的是PNG,JPEG,GIF,SVG和最近的WebP。

HTML标准要求alt要显示的属性,以描述图像。屏幕阅读器和搜索引擎机器人都使用此功能:

<img src="dog.png" alt="A picture of a dog" />

您可以设置widthheight属性来设置元素将占用的空间,以便浏览器可以对其进行说明,并且在完全加载时不会更改布局。它需要一个数值,以像素为单位。

<img src="dog.png" alt="A picture of a dog" width="300" height="200" />

响应式图像使用srcset

srcset属性可让您根据自己的喜好设置浏览器可以使用的响应图像,具体取决于像素密度或窗口宽度。这样,它只能下载呈现页面所需的资源,而不能下载较大的图像(例如在移动设备上)。

在以下示例中,我们针对4种不同的屏幕尺寸提供了4张其他图片:

<img src="dog.png"
	alt="A picture of a dog"
	srcset="dog-500.png 500w,
	  		 dog-800.png 800w,
			 dog-1000.png 1000w,
			 dog-1400.png 1400w">

在里面srcset我们使用w测量以指示窗口宽度。

既然这样做,我们还需要使用sizes属性:

<img src="dog.png"
	alt="A picture of a dog"
	sizes="(max-width: 500px) 100vw, (max-width: 900px) 50vw, 800px"
	srcset="dog-500.png 500w,
	  		 dog-800.png 800w,
			 dog-1000.png 1000w,
			 dog-1400.png 1400w">

在这个例子中(max-width: 500px) 100vw, (max-width: 900px) 50vw, 800px中的字符串sizes属性描述与视口有关的图像大小,多个条件之间用逗号分隔。

媒体状况max-width: 500px设置与视口宽度相关的图像尺寸。简而言之,如果窗口大小小于500像素,它将以窗口大小的100%渲染图像。

如果窗口较大,但<900px,它将以窗口大小的50%渲染图像。

如果更大,它将以800px的分辨率渲染图像。

vw unit of measure can be new to you, and in short we can say that 1 vw是窗口宽度的1%,所以100vw是窗口宽度的100%。

一个有用的网站,可以生成srcset逐渐缩小的图像是https://sensitivebreakpoints.com/

免费下载我的HTML手册


更多HTML教程: