在 HTML 中使用影像

您可以使用 HTML <img> 元素將影像嵌入到 HTML 文件中，而 <picture> 元素則允許您使用響應式影像。本指南提供了與將影像新增到網站相關的資源連結。

參考資料

這些文章介紹了一些用於控制網頁上影像顯示方式的 HTML 元素和 CSS 屬性。

HTML

<img>: HTML <img> 元素用於在網頁中嵌入影像。它支援大量用於控制影像行為的屬性，並允許您新增重要資訊，例如針對無法看到影像的人的 alt 文字。
<picture>: HTML <picture> 元素包含零個或多個 <source> 元素和一個 <img> 元素，它們為不同的顯示/裝置場景提供了影像版本。瀏覽器會考慮每個子 <source> 元素，並在它們之間選擇最佳匹配項。

CSS

object-fit: object-fit CSS 屬性設定替換元素（例如 <img> 或 <video>）的內容如何調整大小以適應其容器。
object-position: object-position CSS 屬性指定選定替換元素中的內容在其元素框內的對齊方式。元素框中未被替換元素物件覆蓋的區域將顯示元素的背景。
background-image: background-image CSS 屬性為元素設定一個或多個背景影像。

指南

以下文章提供了有關選擇和配置影像型別的指南。

影像檔案型別和格式指南: 有關網頁瀏覽器通常支援的各種影像檔案型別的指南，包括有關其各自用例、功能和相容性因素的詳細資訊。此外，本文還提供了有關在特定情況下選擇最佳影像檔案型別的指南。
包含 width 和 height 屬性有助於避免卡頓: 這會改變瀏覽器載入影像的方式，以便瀏覽器儘早計算其縱橫比，並可隨後用於在影像載入之前保留影像的顯示尺寸。

其他主題

可能感興趣的相關主題。

學習 HTML：響應式影像: 在本文中，我們將瞭解響應式影像的概念 - 這些影像能夠在螢幕尺寸、解析度和其他此類功能差異很大的裝置上正常顯示 - 並瞭解 HTML 提供的哪些工具可以幫助實現它們。