藝術方向

Katie Hempenius
Katie Hempenius
X

立即試用

  • 如要預覽網站，請按下「查看應用程式」。然後按下 全螢幕 全螢幕。
  • 使用不同的瀏覽器大小重新載入應用程式。請注意 不但大小不同，而且裁剪和裁剪方式 顯示比例。

到底怎麼回事？

藝術方向 在不同大小的螢幕上顯示不同的圖片。

回應式圖片會載入同一張圖片的各種尺寸。藝術方向 這項功能會更進一步，根據使用者的 螢幕。

使用藝術方向功能來改善視覺呈現方式。舉例來說 在此示範中，我們會裁剪圖片，確保搜尋點 (花朵) 不論螢幕為何， 一律都會詳細顯示。藝術方向的好處 純粹美感；比起回應式圖片，也不會提高成效

查看程式碼

  • 查看 index.html 以瞭解此示範的藝術方向程式碼。

程式碼的運作方式

藝術方向會使用 <picture>、 <source>, 和 <img> 標記。

相片

<picture> 代碼會為 0 個或多個 <source> 標記和一個 <image> 標記提供包裝函式。

資料來源

<source> 標記會指定媒體資源。

瀏覽器使用第一個 <source> 標記搭配媒體查詢 傳回「是」如果沒有相符的媒體查詢， 瀏覽器改回載入 <img> 指定的圖片。 標記。

img

<img> 標記可讓這段程式碼在不支援 支援 <picture> 標記

如果瀏覽器不支援 <picture> 標記，則會載入 <img> 標記指定的映像檔。