12

我有以下快照点：480px, 900px, 1800px, 2400px.

这个标记：

<img
 sizes="(max-width: 2400px) 100vw, 2400px"
 srcset="
  boat-480.jpg 480w,
  boat-900.jpg 900w,
  boat-1800.jpg 1800w,
  boat-2400.jpg 2400w"
 src="boat-2400.jpg"
 alt="This is a boat">

我应该如何让响应式图像工作？

4

1 回答 1

17

1. 基础

设备像素比

设备像素比是每个 CSS 像素的设备像素数，与：

  • 设备的像素密度（每英寸的物理像素数）
  • 浏览器的缩放级别因此，更大的像素密度和/或更高的缩放级别会导致更高的设备像素比。

srcset属性和x描述符

在<img>标签上，属性中的x描述符srcset用于定义设备像素比。所以在：

<img src="image.jpg" srcset="image-1x.jpg 1x, image-2x.jpg 2x, image-3x.jpg 3x">
  • 对于 1 的设备像素比，将使用图像 image-1x.jpg。
  • 对于 2 的设备像素比，将使用图像 image-2x.jpg。
  • 对于 3 的设备像素比，将使用图像 image-3x.jpg。
  • 对于后备，src将使用属性 (image.jpg)。

srcset属性和w描述符

如果您想在更大或更小的视口上显示不同的图像，则w描述符 insrcset和新属性 ( sizes) 将发挥作用：

<img src="image.jpg" srcset="image-1x.jpg 200w, image-2x.jpg 400w, image-3x.jpg 600w">

这提到第一张图片的宽度是200px，第二张图片是400px，第三张图片是600px。此外，如果用户的屏幕很150 CSS pixels宽，就描述符而言，这等同于以下内容x：

<img src="image.jpg" srcset="image-1x.jpg 1.33x, image-2x.jpg 2.67x, image-3x.jpg 4x">

sizes属性

您想要在不同屏幕尺寸上使用不同尺寸图像（不同高度、宽度）的实际实现是通过使用sizes属性和属性w描述符来完成的srcset。

<img src="image.jpg" sizes="50vw" srcset="image-1x.jpg 200w, image-2x.jpg 400w, image-3x.jpg 600w">

如果浏览器宽度为500 CSS pixels，则图像将显示为250px宽（因为50vw）。现在，这相当于指定：

<img src="image.jpg" srcset="image-1x.jpg 0.8x, image-2x.jpg 1.6x, image-3x.jpg 2.4x">

因此，对于1.5x显示器，image-2x.jpg将由浏览器下载，因为它给出了设备像素比（1.6x最适合1.5x显示器）。

2. 回答你的问题

您提到您模拟了一个480 像素CSS 宽度的屏幕。

因为您已设置sizes为100vw，这相当于指定：

<img src="boat-2400.jpg" srcset="
     boat-480.jpg 1x,
     boat-900.jpg 1.88x,
     boat-1800.jpg 3.75x,
     boat-2400.jpg 5x">

您有机会3x显示，因此浏览器会下载boat-1800.jpg文件。

问题

奇怪的是，当我在 iOS 上的 Chrome 上测试时，浏览器实际上下载了boat-2400.jpg，这更令人担忧。

这可能是由于您的 iOS 设备的设备像素比较高，可能接近 5。

我在这里错过了什么吗？

我不这么认为。

我想我不需要 size 属性，因为我在所有视图中都将图像设置为 100vw

的值sizes是100vw默认值。但是如果你想使用w描述符并且想要拥有除你的之外100vw的东西sizes，你需要sizes属性。

于 2016-02-02T00:44:04.677 回答