网页上的文字会自动环绕在屏幕边缘，不会溢出。另一方面，图片具有固有大小。如果图片比屏幕宽，图片会溢出，必须水平滚动屏幕才能看到全部内容。
幸运的是，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 值意味着浏览器在调整图片大小时会保留图片的宽高比。
有时，图片的尺寸由内容管理系统 (CMS) 或其他内容分发系统设置。如果您的设计要求的宽高比不同于 CMS 的默认宽高比，您可以使用 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 属性更改图片剪裁的位置。这会调整剪裁的焦点，以便您确保图片最重要的部分仍然可见。
img {
max-inline-size: 100%;
block-size: auto;
aspect-ratio: 2/1;
object-fit: cover;
object-position: top center;
}
object-position 设置为仅剪裁图片的一侧。传送您的图片
这些 CSS 规则会告诉浏览器您希望如何呈现图片。您还可以在 HTML 中提供关于浏览器应如何处理这些图片的提示。
尺寸调整提示
如果您知道图片的尺寸，请始终添加 width 和 height 属性。即使图片以不同的尺寸呈现（根据您的 max-inline-size 规则），浏览器仍然知道宽高比，并且可以预留适量的空间。这可以防止其他内容在图片加载时出现跳动。
<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" 属性，您通常可以将 loading 设置为默认值 eager，以防止图片被延迟加载：
<img
src="hero.jpg"
alt="A description of the image."
width="1200"
height="800"
loading="eager"
>
提取优先级
对于 LCP 图片等重要图片，您可以将 fetchpriority 属性设置为 high，从而使用提取优先级进一步确定加载优先级：
<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）预加载自适应图片。例如：
<link rel="preload" imagesrcset="hero_sm.jpg 1x hero_med.jpg 2x hero_lg.jpg 3x" as="image" fetchpriority="high">
通过排除 href 回退，您可以确保不支持 srcset 的浏览器仍会预加载正确的图片。
您无法根据浏览器对某些格式的支持来预加载不同格式的图片。尝试这样做可能会导致额外的下载操作浪费用户的数据。
图像解码
您还可以向 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 大小并使用自适应图片来缩短解码时间，而不是使用 decoding。
srcset的自适应图片
多亏了 max-inline-size: 100% 声明，您的图片才会脱离其容器。但是，如果用户的小屏幕和低带宽网络，使他们下载大小与使用大屏幕用户相同的图像会浪费数据。
若要解决此问题，请为同一张图片添加不同尺寸的多个版本，并使用 srcset 属性告知浏览器存在这些尺寸以及何时使用这些尺寸。
宽度描述符
您可以使用以英文逗号分隔的值列表定义 srcset。每个值都是图片的网址，后跟一个空格，然后是关于图片的一些元数据，称为“描述符”。
在此示例中，元数据使用 w 单位描述每张图片的宽度。一个 w 表示一个像素的宽度。
<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 属性的补充，而不是取代它。您仍然需要具有有效的 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 像素，那么在 srcset 列表中 medium-image.png 的后面可以有 2x。
您无需使用整数。如果图片的其他版本大小为 450 x 300 像素，您可以使用 1.5x 来描述它。
展示性图片
HTML 中的图片属于内容。因此，您需要为屏幕阅读器和搜索引擎添加 alt 属性以及图片说明。
如果您嵌入的是装饰性图片，但没有任何有意义的内容，则可以使用空的 alt 属性。
<img
src="flourish.png"
alt=""
width="400"
height="50"
>
您必须始终添加 alt 属性，即使该属性为空也是如此。空 alt 属性会告知屏幕阅读器图片是呈现性图片。缺少的 alt 属性无法提供该信息。
理想情况下，展示性或装饰性图片包含在 CSS 中，而不是 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
);
}
浏览器会根据设备的像素密度选择最适合的图片。
向网站添加图片时，您需要考虑多种因素，包括：
- 为每张图片预留合适的空间。
- 弄清楚您需要多少尺寸。
- 确定图片是内容图片还是装饰图片。
花时间修正图片是值得的。不恰当的图片策略可能会让您的用户感到厌烦，让他们感到失望。无论用户的设备或网络连接如何，良好的图片策略都能让您的网站看起来简洁明快。
您的工具包中还有一个名为 picture 元素的 HTML 元素，以便您更好地控制图片。
检查您的掌握程度
测试您对图片知识的掌握情况。
必须为图片添加样式，使之适合视口。
当图片的高度和宽度被强制调整为不自然的宽高比时，哪些样式有助于调整图片适应这些比例的方式？
object-fitcontain”和“cover”等关键字的匹配程度。image-fitfit-imageaspect-ratio在图片上添加 height 和 width 会导致 CSS 无法为其设置不同的样式。
srcset 属性不会_______ src 属性，而是会_______。
srcset 绝对不会替换 src 属性。图片中缺少 alt 等同于空 alt。
alt 属性会告知屏幕阅读器此图片是呈现图片。alt 不会向屏幕阅读器发送任何信号。