本文是Microsoft Web開發系列的一部分,探討了響應式圖像 - 創建網站的關鍵方面,這些網站可以在各種設備之間完美運行。 它不再是可選的;在我們的多設備世界中,這是必要的。
鑰匙要點:
srcset
>屬性提供針對不同設備像素比的各種圖像源。 srcset
>屬性相對於視口指定圖像顯示大小,引導瀏覽器選擇最佳映像。 sizes
>利用<picture></picture>
>
type
始終使用src
srcset
>使用Microsoft提供的工具徹底測試各種設備和瀏覽器的響應性和性能
響應式圖像將其表示形式調整到查看設備。 “最佳形式”是指不同的事物:
>根據屏幕尺寸顯示不同的圖像資產(例如,13.5英寸筆記本電腦與5英寸手機的不同圖像)。
>在存在較舊的腳本方法時,由於有多個下載或缺少圖像的潛在問題,因此不建議使用它們。首選方法使用:
屬性srcset
屬性sizes
元素<picture></picture>
>
srcset
在潛入使用之前,讓我們定義:
設備像素比:srcset
這是每個CSS像素的設備像素的數量,受:
設備像素密度(每英寸物理像素):較高的分辨率設備具有較高的密度,因此在相同的變焦級別上具有較高的設備像素比。 >
瀏覽器縮放級別:更高的縮放級別增加給定設備的設備像素比。<img src="/static/imghw/default1.png" data-src="https://img.php.cn/upload/article/000/000/000/174027748422704.jpg" class="lazy" alt="How to Build Responsive Images with srcset " />
space-needle.jpg
對於1. space-needle-2x.jpg
對於2的設備像素比2
space-needle-hd.jpg
屬性可作為無支持的瀏覽器的後備。 描述符指定圖像寬度:src
srcset
w
<img src="/static/imghw/default1.png" data-src="images/space-needle.jpg" class="lazy" srcset="images/space-needle.jpg 200w, images/space-needle-2x.jpg 400w, images/space-needle-hd.jpg 600w" alt="如何使用SRCSET構建響應式圖像" >
>
sizes
基於視口大小來控製圖像大小,請在
>示例1(一半視口寬度的圖像):sizes
>
w
srcset
>
<img src="/static/imghw/default1.png" data-src="images/space-needle.jpg" class="lazy" sizes="50vw" srcset="images/space-needle.jpg 200w, images/space-needle-2x.jpg 400w, images/space-needle-hd.jpg 600w" alt="如何使用SRCSET構建響應式圖像" >
>
元素允許根據渲染尺寸和瀏覽器功能進行圖像選擇。 它包含<img src="/static/imghw/default1.png" data-src="images/space-needle.jpg" class="lazy" sizes="(max-width: 40em) 100vw, 50vw" srcset="images/space-needle.jpg 200w, images/space-needle-2x.jpg 400w, images/space-needle-hd.jpg 600w" alt="如何使用SRCSET構建響應式圖像" >
,,<picture>
>屬性的元素。 一個
(注意:圖像源和大小是說明性的。)
實施的常見問題。 <picture>
<source>
srcset
sizes
media
type
<img src="/static/imghw/default1.png" data-src="https://img.php.cn/upload/article/000/000/000/174027748575415.png" class="lazy" alt="How to Build Responsive Images with srcset " />
</picture>
結論:>
以上是如何使用SRCSET構建響應式圖像的詳細內容。更多資訊請關注PHP中文網其他相關文章!