在 HTML 中使用圖片
HTML 的 <img> 元素允許你在 HTML 文件中嵌入圖片，而 <picture> 元素則支援 響應式圖片。在本指南中，你將找到與在網站上新增圖片相關的資源連結。這些文章提供了關於選擇和配置圖片型別的指導。
- 影像檔案型別和格式指南
-
本文件將介紹 Web 瀏覽器普遍支援的各種圖片檔案型別，包括它們的具體用例、功能和相容性因素。此外，本文還提供了針對特定情況選擇最佳圖片檔案型別的指導。
- 包含
width和height屬性有助於避免佈局抖動 -
這改變了瀏覽器載入圖片的方式，以便瀏覽器能儘早計算出圖片的 縱橫比，並隨後在圖片載入前預留其顯示空間。
參考
這些文章涵蓋了一些用於控制圖片在 Web 上顯示方式的 HTML 元素和 CSS 屬性。
HTML
CSS
object-fit-
object-fitCSS 屬性設定瞭如<img>或<video>等 替換元素 的內容應如何調整大小以適應其容器。 object-position-
object-positionCSS 屬性指定了所選 替換元素 的內容在其元素框內的對齊方式。元素框中未被替換元素物件覆蓋的區域將顯示元素的背景。 background-image-
background-imageCSS 屬性為元素設定一個或多個背景圖片。
另見
- 響應式圖片
-
在本篇文章中，我們將學習響應式圖片的概念——能夠很好地適應各種不同螢幕尺寸、解析度及其他功能的裝置的圖片——並探討 HTML 提供了哪些工具來幫助實現它們。