响应式图像

 

　　是HTML5元素，旨在为我们提供更多的功能和性能更好的响应图像功能。 Picture标签不会加载单个图像并尝试调整其大小以适合所有可能的视口尺寸和布局，而是加载不同大小和分辨率的多个图像，选择最适合不同场景的图像。

 

　　它的工作原理类似于这样和元素的工作，让您可以将多个在父标签元素，每一个使用和属性与条件一起指定不同的图像文件下，他们应该被加载。

 

　　但是，与元素一样强大，有时它提供给我们的功能要比实现适当的响应能力所需的功能更多。 有时候，他的真正需要的是一个普通使用元素和属性内联。

 

　　在本教程中，我们将解决您可能遇到的任何困惑。 我们会看到什么和属性都可以做，如何将它们与使用或元素，以及如何知道哪个组合是正确的选择。

 

　　使用以下链接跳至每个部分：

 

　　从默认的<img>元素开始  如何对一组图像使用“ srcset”

 

　　使用“尺寸”控制图像布局

 

　　何时使用<picture>标签

 

　　如何使用<picture>  浏览器对<picture>的支持

 

　　这是我们的起点，它是一个带有属性的常规旧香草元素，用于提供基于文本的描述。

 

　　在响应图像的基本级别上，通常将其与一点CSS配对，如果其父容器变得太小而无法容纳它，则允许该单个图像缩小：

 

　　这是确保图像尺寸不会显着错误的基本工作，但是无论哪种情况，无论哪种效果（差），它仍然只给我们提供一张图像。

 

　　它从一方面解决了问题，使我们可以在许多不同的情况下显示相同的图像。 但这不允许我们为不同的情况指定图像。 例如，对于某些用户来说，原始图像很可能不切实际地很大（就文件大小而言），以便在他们的移动网络上下载。

 

　　提示 ：看看我的网站费用是多少？ 由Tim Kadlec撰写，旨在为全球用户了解移动数据的实际成本。

 

　　“根据HTTP Archive的2019年7月1日运行，中位站点现在重1937kb。”

 

　　– 我的网站费用是多少？

 

　　要开始制定更好的解决方案，让我们继续进行 。

 

　　可以在视口的大小上加载一组图像，为宽视口加载大图像，为窄视口加载小图像，而不是在各处仅使用一个图像，这会更好。

 

　　这就是属性的用途：一组图像，而不是通过属性的图像。

 

　　当仅使用常规属性加载图像时，浏览器直到加载后才知道图像的宽度。 但是，使用属性，我们可以提前告知浏览器每个图像的宽度。 然后，它可以使用该信息来加载最合适的图像，具体取决于当时视口的大小。

 

　　在使用时，您仍将使用属性，因为它提供了浏览器应该使用的默认图像，并且如果有人使用的是不支持的旧浏览器，则可以作为备用。

 

　　首先移动

 

　　最好在此处采用移动优先的方法，并通过属性加载最小的图像。 然后在属性内将默认图像及其较大的备用图像添加为逗号分隔的列表，并使用指定每个图像的宽度（在空格之后）：

 

　　尽管您可能听说过相反的建议，但将默认图像及其宽度包括在非常重要，否则浏览器将不会在选择的选项列表中包括该图像，因此它将永远不会以任何视口宽度加载。

 

　　使用上面的代码，浏览器将以较小的视口大小加载小图像，以中等的视口大小加载中等图像，并以较大的视口加载大图像。 （非常粗略地描述视口大小）。

 

　　如果浏览器不支持 ，（这对于相当老的浏览器来说只是一个问题），它将退回到显示小图像。 如果您的项目需要使用较旧的浏览器，请确保包含一些CSS以将默认图像缩放到正确的大小。

 

　　注意：尽管上面的代码实际上是可以正常工作的，但是根据srcset属性规范，如果您使用进行宽度切换，则还必须包含一个属性，我们将在稍后讨论。

 

　　您也可以使用来根据其DPI加载图像，但是您不必指定其宽度，而应将其像素密度显示为 ：

 

　　但是，不能在同一属性中使用像素密度和宽度，也不能将像素密度规格与我们要添加到混合中的属性一起使用。 因此，您通常更有可能在属性中使用宽度规范。

 

　　属性允许您指定图像布局的宽度。 请注意，这是与属性中每个文件指定的实际图像宽度不同的概念。 在给定的宽度是仅涉及布局，可以为创建空的占位符插槽成浏览器可以从你的图像插入被认为 。

 

　　浏览器选择从加载哪个图像文件都没有关系，它将以您指定的显示宽度

 

　　例如，如果您希望图像始终显示为视口宽度的80％，则可以使用：

 

　　注意：不允许使用百分比值，但可以使用 （视口宽度）值。

 

　　在此示例中，浏览器仍将根据视口的大小在小图像，中图像和大图像之间进行选择，但是无论选择哪个图像，浏览器都将以的宽度显示。

 

　　在上面的示例中，我们在属性中仅使用了一个值，但是您可以通过添加“媒体条件”来有条件地更改图像布局。 媒体条件是我们使用媒体查询时评估的是非状态，当评估时，可以根据视口宽度之类的不同布局图像。

 

　　例如，根据示例，我们可能希望将图像以的宽度进行布局，以左右都有一些空白。 但是，如果视口足够宽（例如至少 ，我们可能只想保留其中的大部分视口。

 

　　我们可以通过更改代码以在大小之前添加媒体条件来实现此 ，如下所示：

 

　　现在，图像仅在调整大小如果视口的至少宽。

 

　　如果视口不符合我们刚刚添加的媒体条件，我们还可以将图像布局的默认宽度设置为 。 由于的默认值不需要媒体条件，因此我们所需要做的就是在逗号后面加上值：

 

　　如果选择这样做，我们还可以在两者之间添加其他大小和媒体条件，以便当视口缩小到 ，将长度设置为 ：

 

　　请注意，在上面的示例中，无论我们通过属性提供图像的布局如何，浏览器仍将自动选择最适合的图像，就像在添加任何媒体条件之前所做的一样。

 

　　您可能会看到它说您应该使用 媒体条件来确定应该从的列表中加载哪个图像。 这是间接的情况，但是以这种方式考虑功能可能无济于事。

 

　　我之所以这样说，是因为您可能会认为您需要使用与常规媒体查询中使用的的媒体条件，即指定特定的媒体条件以触发要加载的每个图像。 但是，这并不是这里的工作方式。

 

　　而是，浏览器总是会自动处理图像选择。