【问题标题】:srcset without high-dpi screen supportsrcset 不支持高 dpi 屏幕
【发布时间】:2019-07-03 17:53:00
【问题描述】:

有一个带有 srcset 属性的图片标签,如下所示:

<img src="..." 
  srcset="small.jpg 300w, large.jpg 900w"
  sizes="300px" />

在正常的 1x dpi 屏幕上,它加载 small.jpg,但在高 DPI 屏幕(例如视网膜)上 - 它加载 large.jpg

有没有办法让它在高 DPI 屏幕上加载 small.jpg

【问题讨论】:

    标签: javascript html responsive-images srcset


    【解决方案1】:

    这就是srcset 的工作方式,这是故意的。

    如果您想阻止浏览器下载您提供的相关图像,因为您的sizes 值表明您的用例不需要支持可变视口宽度,您应该使用不带srcset 的简单src

    <img src="small.jpg" width="300" />
    

    但这意味着您始终将图像显示为 300px 宽,屏幕密度高于 1dppx 的用户可能会看到低质量的渲染。

    您能解释一下为什么要发生这种情况吗?

    【讨论】:

      猜你喜欢
      • 2016-06-09
      • 2015-12-19
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 2017-10-29
      • 1970-01-01
      • 2015-11-25
      相关资源
      最近更新 更多