已知图像大小时的图片元素使用情况

我想让自适应网页加载适当大小的图像。我现在有一个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

什么是做到这一点的干净的方式？令人困惑的是在我自己的反应的实验中，大尺寸总是加载：

来源

2016-09-29 hendry

这就是我想要的，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格式的高效传输

来源

2016-10-07 05:16:26 hendry

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

<picture>元素用于您需要基于艺术方向的选择时，例如，如果您在宽屏幕和宽屏幕上使用广角拍摄。关于<picture>元素的一点是，它用于我们希望在特定断点处显示特定图像的情况，因此在使用<picture>元素时，在图像选择方面不存在歧义。

回到我原来的问题，你是使用相同的图像为每个屏幕宽度，但只是在不同的大小？如果是这样，一个具有srcset属性的正常img元素将为您提供更好的服务。

对于流体宽度图像，srcset将与w描述符和sizes属性一起使用。在sizes属性中有两个值。首先是媒体条件。第二个是源大小值，它决定给定特定媒体条件的图像宽度。下面是srcset语法的例子：

<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">

在这里，我说的是浏览器，对于视口宽度至400个像素，使视口宽度的图像100％。在视口宽度高达960像素的情况下，使图像占视口宽度的75％。对于960像素以上的所有图像，将图像制作为640像素。浏览器利用来自srcset和sizes的信息来提供最符合所述条件的图像。

全面披露：我举了很多这从文章中，我以前写的关于这一主题

来源

2016-09-29 18:19:56 huijing

已知图像大小时的图片元素使用情况

回答

相关问题