在 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 提供的哪些工具可以帮助实现它们。