了解srcset宽度值

时间:2015-04-28 19:51:12

标签: html image responsive-design srcset

我试图了解srcset宽度值的工作原理,但我的基本示例是让我失望。

鉴于下面的代码,我希望在视口为>时显示大图像。 600px的。但是,它实际上在784px变化。我不确定为什么会这样。

<!-- image changes to large variant at 784px instead of the expected 1024px -->
<img
  src="small.jpg"
  srcset="small.jpg 600w,
          large.jpg 1024w"
  alt="A test image">

1 个答案:

答案 0 :(得分:2)

目前,Chrome使用几何平均值在两个候选图像之间进行选择。所以它仍然使用600图像,因为1024太大,因此切换。

在即将发布的版本中,如果您使用低密度设备,Chrome将始终切换到较高的图像。在其他设备上,Chrome仍会使用中位数。