3

我正在使用 angular 和材质并使用 img srcset 来处理标题的响应图像。

到目前为止，这就是我正在做的事情：

<img srcset="../../assets/mtn-bg_600.jpg 600w,
      ../../assets/mtn-bg_960.jpg 960w,
      ../../assets/mtn-bg_1280.jpg 1280w,
      ../../assets/mtn-bg_1600.jpg 1600w"
 sizes="100vw"
 src="../../assets/mtn-bg_1600.jpg" alt="Header image">

我对如何使用 srcset 处理高分辨率图像感到困惑。我已经看到 srcset 的示例只有分辨率为 1x 2x 或带有媒体查询的图像。但是想清楚如何处理高分辨率图像以及媒体查询。

我是否需要在 srcset 中添加具有尺寸的高分辨率图像，并且 img 元素会自动处理它。

我正在使用 flex-layout for material 为我的应用程序和 srcset 提供的默认断点。还请建议我是否需要考虑 srcset 的任何其他断点。

谢谢！

4

1 回答 1

2

For an in depth look into srcset and responsive images, the MDN web doc "Responsive Images" is a great resource. And there are several other articles out there just a short search away.

Using x-descriptors makes it convenient to serve images at consistent physical sizes on screens of different screen resolutions.

For example, if you have a 900 pixel wide photo loading on a standard screen, you will want a 1350px wide photo loading on a 1.5x screen, 1800px wide on 2x etc, in order for them to look physically the same to the viewer.

The code will look something like this:

<img srcset="my-image-900w.jpg,
             my-image-1350w.jpg 1.5x,
             my-image-1800w.jpg 2x"
     src="my-image-900w.jpg" alt="how would you describe it?">

If I had a device with a 2x pixel density screen, it would load only my-image-1800w.jpg and ignore the others.

For deciding what widths to choose I would match the css media-queries. Then so long as you have an option for small screens (say 300w) you should be all set. Personally I use boostrap as a framework, so I use the same widths to load my responsive images, plus a portfolio size for screens larger than 2000 pixels.

Hope this helps!

于 2018-09-01T22:37:33.513 回答