元素用於藝術方向，以根據屏幕尺寸或佈局傳遞不同的圖像。 1。它包含帶有媒體查詢的元素，以指定何時應顯示每個圖像，並以必需的 sholdback結尾。 2。常見用例包括移動式裁剪，方向更改以及設計驅動的圖像互換。 3.最佳實踐包括始終使用標籤以供訪問性，編寫一致的ALT文本，避免使用<picture>進行分辨率更改，跨設備進行測試，優(yōu)化每個圖像以及將格式切換（例如WebP和JPEG）與藝術方向相結合，確保最佳，上下文適用於響應式設計。

當您需要根據屏幕尺寸，設備或佈局傳遞不同的圖像時，HTML <picture></picture>元素是一個強大的工具，即一種稱為藝術方向的實踐。與僅改變分辨率的簡單響應式圖像不同，藝術方向通常涉及裁剪，重新修復甚至完全不同的圖像以更好地適合各種設備上的設計。

這是有效地將<picture></picture>元素用於藝術方向的方法：

1。了解<picture></picture>元素結構

<picture></picture>元素充當多個<source></source>元素的容器，並以後備<img src="/static/imghw/default1.png" data-src="https://img.php.cn/upload/article/000/000/000/175410918639647.jpeg" class="lazy" alt="如何將HTML圖片元素用於藝術方向" >標籤結尾。瀏覽器按順序讀取來源，並使用與給定媒體條件匹配的第一個。

 <圖片>
  <source media =“（最大寬度：799px）” srcset =“ nrarch.jpg”>
  <source media =“（最小寬度：800px）” srcset =“ wide.jpg”>
  <img src="/static/imghw/default1.png"  data-src="https://img.php.cn/upload/article/000/000/000/175410918874197.jpeg"  class="lazy"  src =“ flastback.jpg” alt =“響應式映像”>
</picture>

• <source>中的media屬性定義了何時應使用每個圖像。
• srcset指向圖像文件。
• <img src="/static/imghw/default1.png" data-src="https://img.php.cn/upload/article/000/000/000/175410918874197.jpeg" class="lazy" alt="如何將HTML圖片元素用於藝術方向" >標籤是必需的，並作為後備（也由輔助技術使用）。

在此示例中：

• 在小於800px的屏幕上顯示了narrow.jpg 。
• 在較寬的屏幕上，出現wide.jpg （例如，具有更多上下文的景觀版本）。
• 如果任何來源都不匹配，瀏覽器將落後於fallback.jpg 。

2。藝術方向的用例

當佈局跨斷點顯著變化時，藝術方向會閃耀。常見場景包括：

• 移動與桌面裁剪：在移動設備上，您可能需要專注於一個人的臉，在桌面上顯示完整的場景。
• 方向變化：在肖像移動設備上提供垂直圖像，並在景觀或桌面上提供水平圖像。
• 設計驅動的掉期：將圖像替換為更適合重新設計的側邊欄或英雄部分的圖像。

例如：

 <圖片>
  <source media =“（最大寬度：599px）” srcset =“ hero-mobile.jpg”>
  <source media =“（最小寬度：600px）” srcset =“ hero hero-desktop.jpg”>
  <img src =“ hero hero-fallback.jpg” alt =“英雄橫幅”>
</picture>

這樣可以確保移動版本不僅是縮放的桌面映像，而且還確保了構成的桌面圖像。

3。最佳實踐和技巧

為了充分利用<picture>的藝術指導：

• 始終包括一個<img alt="如何將HTML圖片元素用於藝術方向" >標籤：這不是可選的。它提供可及性和後備。
• 使用描述性的alt文本： alt應反映圖像的目的，而不是因源而變化。
• 避免使用<picture>僅用於分辨率切換：如果您僅更改圖像大?。ú皇墙M合），請改用srcset和sizes與<img alt="如何將HTML圖片元素用於藝術方向" >相反。
• 跨設備測試：確保源之間的過渡平穩(wěn)，不會引起佈局變化。
• 優(yōu)化每個圖像：為每個版本量身定製文件大小和格式（例如，WebP）。

您還可以將格式切換與藝術方向相結合：

 <圖片>
  <source media =“（最大寬度：799px）” srcset =“ crop-small.webp” type =“ image/webp”>
  <source media =“（最大寬度：799px）” srcset =“ crop-small.jpg” type =“ image/jpeg”>
  <source media =“（最小寬度：800px）” srcset =“場景wide.webp” type =“ image/webp”>
  <source media =“（最小寬度：800px）” srcset =“場景wide.jpg” type =“ image/jpeg”>
  <img src =“ fallback.jpg” alt =“黃昏的城市天際線”>
</picture>

這既可以提供藝術定向和格式優(yōu)化的圖像。

基本上， <picture></picture>元素可為您提供精確控制哪個圖像出現的位置 - 當圖像組合必須適應佈局時，不僅是屏幕大小。當您需要的不僅僅是擴展時，請使用它：當您需要真正的藝術方向時。

以上是如何將HTML圖片元素用於藝術方向的詳細內容。更多資訊請關注PHP中文網其他相關文章！