响应式图像在移动浏览器中无法正确加载

Question

我有一个包含标题图像的网站。

然而，当我在 iOS 上的 Firefox 或 Safari 中加载网站时，这些标题图像一开始似乎没有加载。这是截图：

当我单击菜单中的不同页面时，会加载标题图像。为什么一开始不加载？

在 Safari 中从我的 iPhone 进行调试显示以下内容：

我认为这可能与正在加载的图像是 pruimendijk_oeverwoning_2560.jpg 文件这一事实有关，这不是我试图在移动设备上加载的文件。

这是相关的html：

<figure class="cover">
  <img src="/img/pruimendijk_oeverwoning_01_2560.jpg"
       srcset="/img/pruimendijk_oeverwoning_01_768.jpg 768w,
               /img/pruimendijk_oeverwoning_01_1024.jpg 1024w,
               /img/pruimendijk_oeverwoning_01_1440.jpg 1440w,
               /img/pruimendijk_oeverwoning_01_1920.jpg 1920w,
               /img/pruimendijk_oeverwoning_01_2560.jpg 2560w"
       sizes="(max-width: 768px)   768px,
              (max-width: 1024px) 1024px,
              (max-width: 1440px) 1440px,
              (max-width: 1920px) 1920px,
              2560px"
       alt="Een woning in Hof van Waelsicht"
       class="cover-img">
</figure>

这是相关的scss：

.cover {
  padding: 0;
  margin: 9rem 0 0 0;
  @include at-least ($S) {
    margin-top: 6rem;
  }
  @include at-least ($M) {
    margin-top: 2.5rem;
  }
  @include at-least ($M) {
    margin-top: 0;
  }
}

.cover-img {
  display: block;
  width: 100vw;
  height: 100%;
  max-height: 87vh;
  object-fit: cover;
}
.cover-empty {
  height: 20rem;
  &+.page-title {
    background: none;
    .page-title-text {
      color: $text-color;
    }
  }
}

srcset

我的格式设置有误吗？

Answer 1

使用稍微不同的方法，但仍然达到相同的结果，可以如下所述：

https://developer.mozilla.org/en-US/docs/Learn/HTML/Multimedia_and_embedding/Responsive_images?retiredLocale=it#art_direction

我使用具有相同检查点的相同资源制作了一个演示，您可以看到，这种方式可以正确匹配媒体条件，而不是使用

srcset

和

sizes

在单个

<img>

元素上执行的操作，而不是使用

<source>

孩子们。

您可以运行扩展的演示并更改设备模拟中的水平分辨率，并查看它如何根据分辨率实时渲染不同的资源：

<head>
  <base href="https://hofvanwaelsicht.nl/">
</head>

<body>  
  <picture>
    <source media="(max-width: 768px)" srcset="/img/pruimendijk_oeverwoning_01_768.jpg" />
    <source media="(max-width: 1024px)" srcset="/img/pruimendijk_oeverwoning_01_1024.jpg" />
    <source media="(max-width: 1440px)" srcset="/img/pruimendijk_oeverwoning_01_1440.jpg" />
    <source media="(max-width: 1920px)" srcset="/img/pruimendijk_oeverwoning_01_1920.jpg" />
    <!-- default behaviour (when the media conditions are not met, this will be the asset loaded) -->
    <img src="/img/pruimendijk_oeverwoning_01_2560.jpg" />
  </picture>
</body>

响应式图像在移动浏览器中无法正确加载

问题描述投票：0回答：1

1个回答

最新问题

响应式图像在移动浏览器中无法正确加载

问题描述 投票：0回答：1

1个回答

最新问题

问题描述投票：0回答：1