HTML响应式图像指南-css教程-PHP中文网

<img src="/static/imghw/default1.png" data-src="https://img.php.cn/upload/article/000/000/000/174381805452081.jpg" class="lazy" alt="HTML Responsive Images Guide ">

登录后复制

在这里，我们使默认值（src）成为图片的“低分辨率”（1×）副本。默认使用最小/最快资源通常是明智的选择。我们还提供了一个2倍版本。如果浏览器知道它在更高像素密度显示器上（2x部分），它将使用该图片。

<img src="/static/imghw/default1.png" data-src="baby-lowres.jpg" class="lazy" alt="HTML响应式图像指南" srcset="
    baby-high-1.jpg 1.5x,
    baby-high-2.jpg 2x,
    baby-high-3.jpg 3x,
    baby-high-4.jpg 4x,
    baby-high-5.jpg 100x
  ">

登录后复制

你可以根据需要添加任意数量的像素密度变体。

虽然这很酷也很有用，但x描述符只占响应式图片使用的一小部分。为什么？它们只允许浏览器根据一项内容进行调整：显示像素密度。然而，很多时候，我们的响应式图片位于响应式布局中，图片的布局大小会随着视口的变化而缩小和拉伸。在这些情况下，浏览器需要根据两项内容做出决策：屏幕的像素密度和图片的布局大小。这就是w描述符和sizes属性的用武之地，我们将在下一节中介绍。

使用srcset / w sizes

这是好东西。这大约占网络上响应式图片使用量的85%。我们仍在提供相同图片的多个副本，并让浏览器选择最合适的副本。但是，我们不是使用像素密度（x）来标记它们，而是使用w描述符来标记它们的资源宽度。因此，如果baby-s.jpg是300×450，我们将其标记为300w。

像这样使用带有宽度（w）描述符的srcset意味着它需要与sizes属性配对，以便浏览器知道图片将在多大空间内显示。如果没有此信息，浏览器将无法做出明智的选择。

创建准确的sizes属性

创建sizes属性可能会很棘手。sizes属性描述了图片在你特定网站的布局中将显示的宽度，这意味着它与你的CSS密切相关。图片渲染的宽度取决于布局，而不仅仅是视口！

让我们来看一个具有三个断点的相当简单的布局。这里有一个演示视频：（此处应插入视频链接，原文缺失）

断点在CSS中使用媒体查询来表达：

body {
  margin: 2rem;
  font: 500 125% system-ui, sans-serif;
}
.page-wrap {
  display: grid;
  gap: 1rem;
  grid-template-columns: 1fr 200px;
  grid-template-areas:
    "header header"
    "main aside"
    "footer footer";
}

@media (max-width: 700px) {
  .page-wrap {
    grid-template-columns: 100%;
    grid-template-areas:
      "header"
      "main"
      "aside"
      "footer";
  }
}
@media (max-width: 500px) {
  body {
    margin: 0;
  }
}

登录后复制

图片在每个断点处的尺寸都不同。以下是影响图片在最大断点（当视口宽度大于700像素时）布局宽度的所有部分的细分：

在最大尺寸下：有9rem的显式间距，因此图片的宽度为calc(100vw - 9rem - 200px)。如果该列使用fr单位而不是200px，我们在这里就会有点麻烦。
在中等尺寸下：侧边栏被放置在下方，因此需要考虑的间距较少。尽管如此，我们仍然可以使用calc(100vw - 6rem)来计算边距和填充。
在最小尺寸下：正文边距被移除，因此calc(100vw - 2rem)就足够了。

呼！说实话，我觉得这有点难以思考，并且在创建这个的过程中犯了很多错误。最后，我得到了这个：

<img ...="" sizes="
    (max-width: 500px) calc(100vw - 2rem), 
    (max-width: 700px) calc(100vw - 6rem),
    calc(100vw - 9rem - 200px)
  ">

登录后复制

一个sizes属性，它为浏览器提供了所有三个断点下图片的宽度，并考虑了布局网格以及所有影响图片宽度的周围间隙、边距和填充。

等等！隆隆声！???这仍然是错误的。我不明白为什么，因为对我来说，这看起来像是100%描述了CSS布局中发生的事情。但它是错误的，因为Martin Auswöger的RespImageLint如是说。在隔离的演示上运行该工具报告没有问题，除了sizes属性对于某些视口大小是错误的，并且应该是：

<img ...="" sizes="
    (min-width: 2420px) 2000px, 
    (min-width: 720px) calc(94.76vw - 274px), 
    (min-width: 520px) calc(100vw - 96px), 
    calc(100vw - 32px)
  ">

登录后复制

我不知道这是如何计算的，它完全无法手动维护，但它是准确的。Martin的工具以编程方式多次调整页面大小，并写出一个sizes属性，该属性描述了在各种视口大小下观察到的图片的实际宽度。它是计算机做的数学运算，所以它是正确的。因此，如果你想要一个超级精确的sizes属性，我建议先放一个错误的属性，运行此工具，然后复制正确的属性。

要更深入地了解所有这些，请查看Eric Portis的w描述符和sizes：幕后。

对sizes更宽松一些

另一种选择是使用马蹄铁和手榴弹方法™的sizes（或者换句话说，接近计数）。这强烈建议。

例如，sizes="96vw"表示：“这张图片在页面上会很大——几乎是全宽——但边缘总会有少量填充，所以不是完全的。”或者sizes="(min-width: 1000px) 33vw, 96vw"表示：“这张图片在大屏幕上采用三列布局，否则接近全宽。”在实用性方面，这可能是一个合理的解决方案。

你可能会发现，一些自动响应式图片解决方案无法知道你的布局，因此会进行猜测——例如sizes="(max-width: 1000px) 100vw, 1000px"。这只是说，“嘿，我们不太了解这个布局，但我们打算试一下，最坏的情况是图片是全宽，让我们希望它永远不会渲染超过1000像素”。

抽象sizes

我相信你可以想象，不仅很容易弄错sizes，而且随着网站布局的变化，它也会随着时间的推移而变得错误。你最好使用模板语言或内容过滤器来抽象它，以便你可以更容易地更改网站上所有图片的值。

我实际上是在谈论一次在一个变量中设置sizes值，然后在网站上的许多不同的<img alt="HTML响应式图像指南" >元素中使用该变量。原生HTML不提供该功能，但任何后端语言都提供；例如，PHP常量、Rails配置变量、用于全局状态变量的React上下文API或模板语言（如Liquid）中的变量都可以用来抽象sizes。

<?php // 在全局范围内
  $my_sizes = "";
?>
<img alt="" sizes="<?php echo $my_sizes; ?>" src="" srcset="">

登录后复制

“浏览器选择”

现在我们已经有了sizes属性，浏览器就知道图片将渲染的尺寸（或接近该尺寸），并且可以发挥其魔力。也就是说，它可以进行一些数学运算，这些运算考虑了屏幕的像素密度以及图片将渲染的尺寸，然后选择最合适的图片。

起初，数学运算相当简单。假设你即将在一个宽度为1200像素的视口中显示一个宽度为40vw的图片，在一个2倍像素密度屏幕上。完美的图片宽度应该是960像素，因此浏览器将寻找最接近的图片。浏览器将始终根据视口和像素密度情况以及从sizes属性中知道的内容计算它首选的目标大小，并将该目标与它在srcset中拥有的内容进行比较以进行选择。然而，浏览器如何进行选择可能会有点奇怪。

如果浏览器选择这样做，它可能会将更多内容纳入此等式。例如，它可以考虑用户的当前网络速度，或者用户是否启用了某种“数据节省”偏好设置。我不确定是否有任何浏览器实际执行此类操作，但如果他们愿意，他们可以自由执行，因为规范就是这样编写的。有些浏览器有时会选择从缓存中提取。如果数学运算表明它们应该使用300像素的图片，但它们已经在本地缓存中拥有600像素的图片，它们将直接使用该图片。聪明。 为此类事情留出空间是srcset/sizes语法的优势。这也是为什么你总是使用相同图片的不同尺寸在srcset中：你无法知道将选择哪个图片。这是浏览器的选择。

这很奇怪。浏览器难道不已经知道这些东西了吗？

你可能在想，“嗯，为什么我必须告诉浏览器图片将渲染多大，它难道不知道吗？”好吧，它知道，但只有在它下载了你的HTML和CSS并布置了所有内容之后。sizes属性与速度有关。它为浏览器提供了足够的信息，以便在它看到你的<img alt="HTML响应式图像指南" >标签时做出明智的选择。

<img data-sizes="auto" data-srcset="
    responsive-image1.jpg 300w,
    responsive-image2.jpg 600w,
    responsive-image3.jpg 900w">

登录后复制

现在你可能在想，“但是延迟加载的图片呢？”（也就是说，在请求延迟加载的图片时，布局已经完成，浏览器已经知道图片的渲染大小）。好吧，好主意！Alexander Farkas的lazysizes库会在延迟加载时自动写出sizes属性，并且正在讨论如何原生为延迟加载的图片进行自动sizes。

sizes可以大于视口

关于sizes的快速说明。假设你的网站上有一个效果，这样当点击图片时，图片会“放大”。它可能会扩展以填充整个视口，或者它可能会放大更多，以便你可以看到更多细节。过去，我们可能不得不点击切换src以切换到更高分辨率的版本。但是现在，假设更高分辨率的源已经在srcset中，你只需将sizes属性更改为一个很大的值，例如200vw或300vw，浏览器应该会自动为你下载超高分辨率的源。Scott Jehl有一篇关于此技术的文章。（此处应插入文章链接，原文缺失）

(其余部分内容过长，建议分段处理或根据需要选择性翻译)

以上是HTML响应式图像指南的详细内容。更多信息请关注PHP中文网其他相关文章！

本站声明

本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn