感觉与使用srcset和大小的响应图像完全丢失

我一直在尝试使用srcset和大小优化我的摄影网站上的图像，但浏览器中的检查员告诉我它正在加载最大的图像大小。为了证实这一点，我添加了一个带有数字的新图像，以便确定正在加载哪个尺寸的图像。感觉与使用srcset和大小的响应图像完全丢失

但无论我如何处理媒体查询，我都无法让它正常工作。我认为我的问题与错误地编写媒体查询有关，但我对自己的智慧结束了。我已经以我可能想到的各种方式测试了这一点。我在这里看过一篇文章，说浏览器可能会缓存更大的图像。所以我在多种浏览器和隐身模式下尝试了它。

如下图所示，名为“测试”的图像有时会加载中等大小的图像，但从不是最小的图像。

以下是我的部分代码。您会注意到我也在使用href标签中的响应式加载（大小）图片，因为它是lightbox的一部分。

您可以在https://www.jeffreygelt.com/alt/处看到相关页面。

这里是我的代码：

<a href="/alt/img/portfolio/test-1000x667.jpg" 
     data-sizes="(min-width: 880px) 1000px, 400px" 
     data-srcset=" 
      /alt/img/portfolio/test-400x267.jpg 400w, 
      /alt/img/portfolio/test-800x533.jpg 800w, 
      /alt/img/portfolio/test-1000x667.jpg 1000w"> 
     <picture> 
      <img class="img-responsive" 
       sizes="(min-width: 880px) 400px, 
         (min-width: 660px) and (max-width: 879px) 800px, 
         (min-width: 400px) and (max-width: 659px) 400px, 1000px" 
       srcset=" 
        /alt/img/portfolio/test-400x267.jpg 400w, 
        /alt/img/portfolio/test-800x533.jpg 800w, 
        /alt/img/portfolio/test-1000x667.jpg 1000w" 
       src="/alt/img/portfolio/test-1000x667.jpg" 
       alt="Asbury Park"> 
     </picture> 
    </a> 

    <a href="/alt/img/portfolio/andy-533x800.jpg" 
     data-sizes="(min-width: 880px) 533px, 395px" 
     data-srcset=" 
      /alt/img/portfolio/andy-395x593.jpg 395w, 
      /alt/img/portfolio/andy-419x629.jpg 419w, 
      /alt/img/portfolio/andy-533x800.jpg 533w"> 
     <picture> 
      <img class="img-responsive" 
       sizes="(max-width: 880px) 533px, 395px" 
       srcset=" 
        /alt/img/portfolio/andy-395x593.jpg 395w, 
        /alt/img/portfolio/andy-419x629.jpg 419w, 
        /alt/img/portfolio/andy-533x800.jpg 533w" 
       src="/alt/img/portfolio/andy-533x800.jpg" 
       alt="Andy's Portrait" /> 
     </picture> 
    </a>

来源

2016-11-10 jgelt

几点建议：1 - 您使用的浏览器是？ [IE根本不支持srcset]（http://caniuse.com/srcset/embed），所以不要在那里测试。 2 - 简化。您可以在不使用sizes属性的情况下执行此操作，因此请从这里开始一旦你得到了一个简单的版本，然后扩展（缓慢）到更复杂的版本，这样你就可以准确地看到事情发生的地方。 [本文]（https://css-tricks.com/responsive-images-youre-just-changing-resolutions-use-srcset/）似乎是一个很好的起点。 –

此外，[这个小提琴]（https://jsfiddle.net/italoborges/v8yftgj2/2/）可能会证明是有帮助的（或不）。这是运行中的'srcset'的一个工作示例。 –

你正在使用哪个灯箱？该灯箱如何处理来自''元素的'data-srcset'？你必须知道你是否有，'some-link.jpg'不会被加载，直到你点击链接。现在，如果点击'some-link.jpg'将会加载，因为默认情况下没有浏览器（据我所知）可以使用data-srcset处理标记元素，除非您以编程方式添加处理该元素的东西。 – caramba

为您列查看它很简单：sizes="(max-width: 400px) 99vh, (max-width: 880px) 49vw, 285px"。我希望你开始明白这一点（以我的例子）。对于您的灯箱视图来说，它有点复杂，因为它既取决于宽度也取决于高度，并且sizes仅支持宽度描述符。在视口宽度和视口高度受限图像的情况下，您可以使用组合宽度和图像宽高比来计算图像宽度。

你可以在这里看到更多的信息： Can I use <picture> for both height and width-constrained images?

另外请注意：这所有的浏览器将计算出来的尺寸长度与devicePixelRatio生成图像的宽度需要。如果Chrome在浏览器缓存中，则加载最大的图片。

来源

2016-11-13 09:13:36

感觉与使用srcset和大小的响应图像完全丢失

回答

相关问题