Katie Hempenius
試用此示範模式
- 如要預覽網站，請按下「查看應用程式」，然後按下「全螢幕」圖示
。 - 使用其他瀏覽器大小重新載入應用程式。請注意圖片的差別：圖片的尺寸不但不同，裁剪和顯示比例也不同。
到底怎麼回事？
藝術方向會顯示不同螢幕尺寸的各種圖片。
回應式圖片載入同一張圖片的不同大小。藝術方向更進一步，並根據螢幕載入完全不同的圖片。
使用藝術方向功能改善視覺呈現的效果。例如，在這個示範中，不同圖片裁剪，確保搜尋點 (花朵) 無論顯示與否都能清楚顯示。藝術方向的優點純粹是美術設計，因此不會比回應式圖片更具效能。
查看程式碼
- 查看
index.html，即可查看此示範的圖片方向程式碼。
程式碼的運作方式
圖片方向會使用 <picture>、<source> 和 <img> 標記。
相片
<picture> 代碼會為零或多個 <source> 標記和一個 <image> 標記提供包裝函式。
資料來源
<source> 標記會指定媒體資源。
瀏覽器會使用第一個 <source> 標記，其中包含傳回 true 的媒體查詢。如果媒體查詢都不相符，瀏覽器會改回載入 <img> 指定的圖片。標記。
img
<img> 標記可讓這個程式碼在不支援 <picture> 標記的瀏覽器中運作。
如果瀏覽器不支援 <picture> 標記，就會載入 <img> 標記指定的圖片。