网页上的文字会自动在屏幕边缘自动换行，以免溢出。图片则有所不同。图片具有固有尺寸。如果图片宽度超过屏幕，图片将溢出，导致系统显示水平滚动条。
幸运的是，您可以在 CSS 中采取措施来防止发生这种情况。
固定图片
在样式表中，您可以使用 max-inline-size 声明渲染的图片尺寸不得大于其包含元素的尺寸。
img {
max-inline-size: 100%;
block-size: auto;
}
您也可以将同一规则应用于其他类型的嵌入内容，如视频和 iframe。
img,
video,
iframe {
max-inline-size: 100%;
block-size: auto;
}
实施该规则后，浏览器会自动将图片缩小以适应屏幕。
添加 auto 的 block-size 值意味着图片的宽高比将保持不变。
有时，图片的尺寸可能会无法控制，例如通过内容管理系统添加图片。如果您的设计要求图片的宽高比与图片实际尺寸不同，请在 CSS 中使用 aspect-ratio 属性。
img {
max-inline-size: 100%;
block-size: auto;
aspect-ratio: 2/1;
}
但是，浏览器可能会挤压或拉伸图片，以使其符合您的首选宽高比。
为防止发生这种情况，请使用 object-fit 属性。
object-fit 值为 contain 会指示浏览器保留图片的宽高比，即使这意味着在上方和下方留出空白区域也是如此。
img {
max-inline-size: 100%;
block-size: auto;
aspect-ratio: 2/1;
object-fit: contain;
}
object-fit 值为 cover 会指示浏览器保留图片的宽高比，即使这意味着裁剪顶部和底部图片也是如此。
img {
max-inline-size: 100%;
block-size: auto;
aspect-ratio: 2/1;
object-fit: cover;
}
如果顶部和底部均匀剪裁造成问题，请使用 object-position CSS 属性调整剪裁的焦点。
您可以确保最重要的图片内容仍然可见。
img {
max-inline-size: 100%;
block-size: auto;
aspect-ratio: 2/1;
object-fit: cover;
object-position: top center;
}
传送您的图片
这些 CSS 规则会告知浏览器您希望如何渲染图片。您还可以在 HTML 中提供关于浏览器应如何处理这些图片的提示。
大小提示
如果您知道图片的尺寸，则应添加 width 和 height 属性。即使图片以不同的尺寸呈现（根据您的 max-inline-size: 100% 规则），浏览器仍然知道宽高比，可以留出适量的空间。这样一来，当图片加载时，您的其他内容不会出现跳动。
<img
src="image.png"
alt="A description of the image."
width="300"
height="200"
>
加载提示
您可以使用 loading 属性告知浏览器是否延迟加载图片，直到图片进入或靠近视口为止。对于非首屏图片，请使用值 lazy。除非用户向下滚动足够深的屏幕，以使图片显示出来，否则浏览器不会加载延迟图片。如果用户从不滚动，则图片永远不会加载。
<img
src="image.png"
alt="A description of the image."
width="300"
height="200"
loading="lazy"
>
对于首屏的主打图片，不应使用 loading。如果您的网站自动应用 loading="lazy" 属性，您通常可以设置 eager 属性（这是默认值），以防止应用此属性：
<img
src="hero.jpg"
alt="A description of the image."
width="1200"
height="800"
loading="eager"
>
提取优先级
对于重要图片（例如 LCP 图片），您可以将 fetchpriority 属性设置为 high，从而使用 Fetch Priority（提取优先级）进一步确定加载的优先级：
<img
src="hero.jpg"
alt="A description of the image."
width="1200"
height="800"
loading="eager"
fetchpriority="high"
>
这会告知浏览器立即以高优先级提取图片，而不是等到浏览器在正常提取图片时完成布局。
但请注意：当您要求浏览器优先下载某种资源（例如图片）时，浏览器必须降低另一个资源（例如脚本或字体文件）的优先级。只有在图片确实很重要的情况下才为图片设置 fetchpriority="high"。
预加载提示
有些图片可能不会显示在初始 HTML 中，例如通过 JavaScript 添加，或在 CSS 中作为背景图片添加。您还可以使用预加载，以便提前提取这些重要图片。对于非常重要的图片，可以将此属性与 fetchpriority 属性结合使用：
<link rel="preload" href="hero.jpg" as="image" fetchpriority="high">
同样，应谨慎使用此属性，以避免过度替换浏览器优先级启发式方法，这可能会导致性能下降。
通过 imagesrcset 和 imagesizes 属性预加载基于 srcset（详见下文）的自适应图片更高级，并且在某些浏览器（而非全部）中受支持：
通过排除 href 后备图片，您可以确保不支持此功能的浏览器不会预加载不正确的图片。
我们目前不支持基于不同图片格式（根据浏览器对这些图片的支持情况）进行预加载，这可能会导致额外下载。
理想情况是尽可能避免预加载，并在初始 HTML 中提供图片，避免重复编写代码，并允许访问浏览器支持的所有选项。
图像解码
您还可以向 img 元素中添加 decoding 属性。您可以告知浏览器，图像可以异步解码。然后，浏览器可以优先处理其他内容。
<img
src="image.png"
alt="A description of the image."
width="300"
height="200"
loading="lazy"
decoding="async"
>
如果图片本身是需要优先处理的最重要的内容，您可以使用 sync 值。
<img
src="hero.jpg"
alt="A description of the image."
width="1200"
height="800"
loading="eager"
decoding="sync"
>
decoding 属性不会更改图片解码的速度，而只是更改浏览器是否会等待图片解码完成，然后再呈现其他内容。
在大多数情况下，这不会造成什么影响，但在某些情况下，可能会让图片或内容的显示速度稍快一些。例如，对于包含大量元素的大型文档，以及需要花费一定时间解码的大型图片，针对重要图片设置 sync 会让浏览器等待并同时渲染两张。或者，设置 async 可以更快地显示内容，而无需等待图像解码。
不过，通常最好尝试避免过多的 DOM 大小，并确保使用响应式图片以缩短解码时间，这意味着解码属性几乎不受影响。
srcset 的自适应图片
得益于 max-inline-size: 100% 声明，您的图片永远不会脱离其容器。但是，即使大图片缩小到合适大小看起来没问题，也会感觉不舒服。如果用户在低带宽网络上使用小屏幕设备，则会下载不必要的大图片。
如果您针对同一图片制作了不同尺寸的多个版本，则可以使用 srcset 属性告知浏览器这些版本。
宽度描述符
您可以传入以英文逗号分隔的值列表。每个值都应该是图片的网址，后跟一个空格，然后是关于图片的一些元数据。这些元数据称为描述符。
在此示例中，元数据使用 w 单位描述每张图片的宽度。一个 w 对应 1 个像素。
<img
src="small-image.png"
alt="A description of the image."
width="300"
height="200"
loading="lazy"
decoding="async"
srcset="small-image.png 300w,
medium-image.png 600w,
large-image.png 1200w"
>
srcset 属性不会替换 src 属性。不过，srcset 属性是对 src 属性的补充。您仍然需要一个有效的 src 属性，但浏览器现在可以将其值替换为 srcset 属性中列出的某个选项。
除非需要，否则浏览器不会下载较大的图片。这样可以节省带宽。
尺寸
如果您使用的是宽度描述符，则还必须使用 sizes 属性向浏览器提供更多信息。此属性可告知浏览器您希望图片在不同条件下显示的尺寸。这些条件在媒体查询中指定。
sizes 属性接受以英文逗号分隔的媒体查询和图片宽度列表。
<img
src="small-image.png"
alt="A description of the image."
width="300"
height="200"
loading="lazy"
decoding="async"
srcset="small-image.png 300w,
medium-image.png 600w,
large-image.png 1200w"
sizes="(min-width: 66em) 33vw,
(min-width: 44em) 50vw,
100vw"
>
在此示例中，您将告知浏览器，当视口宽度为 66em 时，显示的图片宽度不会超过屏幕的三分之一（例如，在三列布局中）。
当视口宽度介于 44em 和 66em 之间时，请在屏幕宽度的一半位置显示图片（两列布局）。
对于 44em 以下的任何内容，均以屏幕全宽显示图片。
这意味着最大的图片不一定适用于最宽的屏幕。在可以显示多列布局的宽浏览器窗口中，系统会使用适合在一列中显示的图片。该图片可能比在较窄的屏幕上用于单列布局的图片小。
像素密度描述符
在另一种情况下，您可能需要提供同一张图片的多个版本。
某些设备具有高密度显示屏。在双密度显示屏上，您可以将两个像素的信息打包在一个像素的空间中。这样一来，图片在这类显示屏上看起来会更清晰。
密度描述符用于描述与 src 属性中的图片相关的图片的像素密度。密度描述符是一个数字，后跟字母 x：1x、2x 等。
<img
src="small-image.png"
alt="A description of the image."
width="300"
height="200"
loading="lazy"
decoding="async"
srcset="small-image.png 1x,
medium-image.png 2x,
large-image.png 3x"
>
如果 small-image.png 的大小为 300 x 200 像素，而 medium-image.png 的大小为 600 x 400 像素，则 medium-image.png 在 srcset 列表中的名称后面可以有 2x。
您无需使用整数。如果图片的其他版本的大小为 450x300 像素，您可以使用 1.5x 来描述它。
演示性图片
HTML 中的图片是内容。因此，您始终需要为屏幕阅读器和搜索引擎提供包含图片说明的 alt 属性。
如果您嵌入的图片纯粹是生机勃勃的图片，而没有任何有意义的内容，请使用空的 alt 属性。
<img
src="flourish.png"
alt=""
width="400"
height="50"
>
您仍必须添加 alt 属性。缺少的 alt 属性与空的 alt 属性不同。空的 alt 属性可向屏幕阅读器传达此图片是演示图片。
理想情况下，展示性或装饰性图片不应位于 HTML 中。HTML 旨在体现结构。CSS 用于演示。
背景图片
使用 CSS 中的 background-image 属性加载展示性图片。
element {
background-image: url(flourish.png);
}
您可以使用 background-image 的 image-set 函数指定多个候选图片。
CSS 中的 image-set 函数的运作方式与 HTML 中的 srcset 属性非常相似。提供图像列表，其中包含每个图像的像素密度描述符。
element {
background-image: image-set(
small-image.png 1x,
medium-image.png 2x,
large-image.png 3x
);
}
浏览器会根据设备的像素密度选择最合适的图片。
在网站中添加图片时，您需要考虑多种因素：
为每张图片预留适当的空间。 确定您需要多少尺寸。 确定图片是内容图片还是装饰图片。
花些时间修正图片是值得的。不良的图片策略会导致用户感到失望和烦恼。好的图片策略能够让您的网站看起来简洁明快，无论用户使用何种设备或网络连接。
您的工具包中还有一个 HTML 元素，即 picture 元素，以帮助您对图片进行更多控制。
检查您的掌握程度
测试您对图片知识的掌握情况
您必须添加样式，使图片适合视口。
当图片的高度和宽度被迫使宽高比不自然时，哪些样式有助于调整图片以适合这些比例的方式？
object-fitcontain 和 cover 等关键字的匹配程度。image-fitfit-imageaspect-ratio在图片上添加 height 和 width 会导致 CSS 无法采用不同的样式。
srcset 属性不会_______ src 属性，而是_______。
srcset 绝对不会替换 src 属性。图片上缺少 alt 与空 alt 相同。
alt 属性可告知屏幕阅读器此图片是演示图片alt 不会向屏幕阅读器发送任何信号。