在图像的srcset中解释w [英] Explain `w` in `srcset` of image

问题描述

我知道srcset用于根据设备的dpi确定要加载哪个图像.我在Google Web基础知识上碰到了这个示例，该示例似乎使用了w单元以及vw单元，恰好是视口宽度的1％:

I understand that the srcset is used to determine which image to load based on the dpi of the device. I came across this example on the Google Web Fundamentals which seems to use the w unit along with the vw unit which just happens to be the 1 % ofviewport width:

<img src="lighthouse-200.jpg" sizes="50vw"
     srcset="lighthouse-100.jpg 100w, lighthouse-200.jpg 200w,
             lighthouse-400.jpg 400w, lighthouse-800.jpg 800w,
             lighthouse-1000.jpg 1000w, lighthouse-1400.jpg 1400w,
             lighthouse-1800.jpg 1800w" alt="a lighthouse">

帮助我了解这是什么度量单位以及如何使用它?

Help me understand what the unit of measure for this is and how I can use it?

推荐答案

根据

宽度描述符，或直接在其后跟'w'的正整数. 宽度描述符除以尺寸中给出的源尺寸 属性以计算有效像素密度.

a width descriptor, or a positive integer directly followed by 'w'. The width descriptor is divided by the source size given in the sizes attribute to calculate the effective pixel density.

此外， W3 状态:

用户代理将计算每个像素的有效像素密度 指定的w描述符和指定的呈现大小的图像 在sizes属性中.然后，它可以选择任何给定的资源 取决于用户屏幕的像素密度，缩放级别和 可能还有其他因素，例如用户的网络状况. 如果用户的屏幕为320 CSS像素宽，则相当于 指定wolf-400.jpg 1.25x，wolf-800.jpg 2.5x，wolf-1600.jpg 5x.在 另一方面，如果用户的屏幕为1200 CSS像素宽，则为 等同于指定wolf-400.jpg 0.33x，wolf-800.jpg 0.67x， wolf-1600.jpg 1.33倍.通过使用w描述符和大小 属性，用户代理可以选择正确的图像源 不论用户设备多大，都可以下载.

The user agent will calculate the effective pixel density of each image from the specified w descriptors and the specified rendered size in the sizes attribute. It can then choose any of the given resources depending on the user’s screen’s pixel density, zoom level, and possibly other factors such as the user’s network conditions. If the user’s screen is 320 CSS pixels wide, this is equivalent to specifying wolf-400.jpg 1.25x, wolf-800.jpg 2.5x, wolf-1600.jpg 5x. On the other hand, if the user’s screen is 1200 CSS pixels wide, this is equivalent to specifying wolf-400.jpg 0.33x, wolf-800.jpg 0.67x, wolf-1600.jpg 1.33x. By using the w descriptors and the sizes attribute, the user agent can choose the correct image source to download regardless of how large the user’s device is.

W3页面上的示例13提供了更多详细信息.

Example 13 on the W3 page provides additional detail.

这篇关于在图像的srcset中解释w的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！