Question

（使用最新版本的Firefox ）

我的img写得像这样：

<body>
    <script>
        function imageLoaded(img) {
            console.log('the responsive image is loaded');
            img.className += ' loaded';
        }
    </script>

    <img class="backgroundImage"
         onload="imageLoaded(this)"
         src="assets/water_bg_1920.jpg"
         sizes="100vw"
         srcset="assets/water_bg_2560.jpg 2560w,
                 assets/water_bg_1920.jpg 1920w,
                 assets/water_bg_1024.jpg 1024w"/>
</body>

和我的css -

@keyframes fadeIn
  0%
    opacity: 0
  100%
    opacity: 1

.backgroundImage
  opacity: 0

.loaded
  opacity: 1
  animation: fadeIn 3s

当我的浏览器位于960px时，它会加载1920图片。在512px，它会加载1024图片。更高的任何东西，它加载2560图像。

当我将sizes设置为100vw时，确切地决定以这些宽度加载这些图像时，我感到非常困惑。在浏览器宽度为1024之前，不应该使用1024px图片，当浏览器宽度为1920时，不应该使用1024px - 1920px图片吗？我在这里误解了什么吗？

修改：最新版本的Chrome中也会出现这种情况，除了原始问题，它还会将添加中的2560图片加载到更小的图像 - 每一次！

edit2：最新版本的Safari与Firefox的行为相同。

edit3：找到了其他人测试的fiddle。它的行为方式相同（在浏览器宽度为图像大小的50％之前不使用较小的图像）。这是一个错误吗？或srcset＆amp;的预期特征sizes？

Answer 1

好吧，对我有用的解决方案（除了一个较旧的Safari版本之外具有大致相同的支持）是使用*i标记，如下所示：

<picture>

在所有最新版本的浏览器中，在正确的断点处正确加载所有图像。

Answer 2

我需要更加谨慎地工作，媒体查询和sizes上的长度设置。我在iPhone上看到img突破到2560w，但这是因为视网膜的像素密度。要使断点更紧密，您需要添加更多媒体查询。

<!doctype html>
<html>

<head>
  <meta charset="utf-8">
  <title>sizes</title>
</head>

<body>
  <img src="http://placehold.it/1024x576/000/fff?text=1024w" sizes="(min-width: 36em) 33.3vw, 100vw" srcset="http://placehold.it/2560x1280/00f/fc0?text=2560w 2560w, http://placehold.it/1920x1080/e00/fcf?text=1920w 1920w, http://placehold.it/1024x576/000/fff?text=1024w 1024w" />
</body>

</html>

Img srcset在浏览器半图像大小

2 个答案: