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