Question

我希望我的自适应网页加载适当大小的图片。我目前有一个HTML模板，如下所示：

  <picture>
  <source media="(min-width: 950px)" srcset="{{ .Cover.Large }}">
  <source media="(min-width: 600px)" srcset="{{ .Cover.Medium }}">
  <source media="(min-width: 300px)" srcset="{{ .Cover.Small }}">
  <source media="(min-width: 150px)" srcset="{{ .Cover.Xsmall }}">
<img src="{{ .Cover.Medium }}" alt="{{ .Title }} poster">
  </picture>

大= 950x400 中= 600x252 小= 300x126 Xmall = 150x63

现在我认为如果图片连续或弯曲，这个最小宽度不会很好。不是最好定义图像的尺寸，让浏览器下载最合适的来源吗？

https://html.spec.whatwg.org/multipage/embedded-content.html#valid-source-size-list

最干净的方法是什么？令人困惑的是，在我自己的响应式实验中，总是加载大尺寸：

Answer 1

首先，您是否为每个场景使用相同的图像，但只有不同的尺寸？如果是这样，您可以使用srcset属性而不是<picture>元素。

当您需要基于艺术方向的选择时，使用<picture>元素，例如，如果您在大屏幕上使用广角镜头，在窄屏幕上使用肖像裁剪。关于<picture>元素的事情是它在我们希望特定图像显示在特定断点的情况下使用，因此在使用{{1}时图像选择方面没有歧义} element。

哪个链接回到我原来的问题，你是使用相同的图像为每个屏幕宽度，但只是不同的大小？如果是这样，具有<picture>属性的普通img元素将为您提供更好的服务。

对于流体宽度图像，srcset将与srcset描述符和w属性一起使用。 sizes属性中有两个值。首先是媒体状况。第二个是source-size-value，它决定了给定特定媒体条件的图像宽度。以下是sizes语法的示例：

srcset

在这里，我告诉浏览器，对于最大400像素的视口宽度，使图像成为视口宽度的100％。在视口宽度最大为960像素时，使图像成为视口宽度的75％。对于960像素以上的所有内容，请将图像设为640像素。浏览器使用<img srcset="uswnt-480.jpg 480w, uswnt-640.jpg 640w, uswnt-960.jpg 960w, uswnt-1280.jpg 1280w" sizes="(max-width: 400px) 100vw, (max-width: 960px) 75vw, 640px" src="uswnt-640.jpg" alt="USWNT World Cup victory">和srcset中的信息来提供最符合规定条件的图片。

完全披露：我从之前在这个主题上写过的文章中提到了很多这个

Answer 2

这就是我想要的，4个图像在屏幕上弯曲，支持多个JPG再现，以节省客户端带宽。请注意，代码缺少src =属性以使其有效。

body {
  display: flex;
  align-items: flex-start;
}
picture {
  margin: 1em;
}

<picture>
<img
srcset="https://placeholdit.imgix.net/~text?txtsize=89&txt=XSmall&w=150&h=63 150w, https://placeholdit.imgix.net/~text?txtsize=89&txt=Small&w=300&h=126 300w, https://placeholdit.imgix.net/~text?txtsize=89&txt=Medium&w=600&h=252 600w, https://placeholdit.imgix.net/~text?txtsize=89&txt=Large&w=950&h=400 950w" sizes="calc(25vw - 2em)">
</picture>
<picture>
<img
srcset="https://placeholdit.imgix.net/~text?txtsize=89&txt=XSmall&w=150&h=63 150w, https://placeholdit.imgix.net/~text?txtsize=89&txt=Small&w=300&h=126 300w, https://placeholdit.imgix.net/~text?txtsize=89&txt=Medium&w=600&h=252 600w, https://placeholdit.imgix.net/~text?txtsize=89&txt=Large&w=950&h=400 950w" sizes="calc(25vw - 2em)">
</picture>
<picture>
<img
srcset="https://placeholdit.imgix.net/~text?txtsize=89&txt=XSmall&w=150&h=63 150w, https://placeholdit.imgix.net/~text?txtsize=89&txt=Small&w=300&h=126 300w, https://placeholdit.imgix.net/~text?txtsize=89&txt=Medium&w=600&h=252 600w, https://placeholdit.imgix.net/~text?txtsize=89&txt=Large&w=950&h=400 950w" sizes="calc(25vw - 2em)">
</picture>
<picture>
<img
srcset="https://placeholdit.imgix.net/~text?txtsize=89&txt=XSmall&w=150&h=63 150w, https://placeholdit.imgix.net/~text?txtsize=89&txt=Small&w=300&h=126 300w, https://placeholdit.imgix.net/~text?txtsize=89&txt=Medium&w=600&h=252 600w, https://placeholdit.imgix.net/~text?txtsize=89&txt=Large&w=950&h=400 950w" sizes="calc(25vw - 2em)">
</picture>

所以我学到了很多东西：

How to flex images
picture.img 很好，您无需使用source element
了解了 vw 视图端口大小宽度，它类似于屏幕的百分比，但在计算边距时必须使用绝对值，例如： calc(25vw - 2em)。 25vw =屏幕的1/4，图片边距为1em + 1em，每边
这个东西真的很复杂，这个例子甚至没有use break points，我建议你避免为了你的理智！

它完全符合我的要求。它加载适当大小和带宽有效的图像。如果调整大小，它不会加载我想要的较小图像。当它向上扩展时，它会获取更大的更高分辨率的图像，这是我想要的，以避免任何丑陋的人工制品。

结果：高效转移多个JPG再现

已知图像大小

2 个答案: