Question

我正在使用带材料的角度并使用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为我的应用程序和srcset提供。还请建议我是否需要考虑srcset的任何其他断点。

谢谢！

Answer 1

要深入了解srcset和响应图像，MDN Web文档“ Responsive Images”是一个很好的资源。而且还有几篇其他文章，仅需短暂搜索即可。

使用x描述符可以方便地在不同屏幕分辨率的屏幕上以一致的物理尺寸提供图像。

例如，如果在标准屏幕上加载900像素宽的照片，则希望在1.5倍屏幕上加载1350px宽的照片，在2x上加载1800px宽，以使它们看起来像与查看者相同。

代码将如下所示：

<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?">

如果我的设备具有2倍像素密度的屏幕，它将仅加载 my-image-1800w.jpg，而忽略其他设备。

要决定选择哪种宽度，我将匹配CSS媒体查询。然后，只要您可以选择使用小屏幕（例如300w），就应该准备就绪。我个人使用boostrap作为框架，因此我使用相同的宽度加载我的响应图像，再加上大于2000像素的屏幕的投资组合大小。

希望这会有所帮助！

使用img srcset处理响应式图像

1 个答案: