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教程: