html图片流体布局代码,如何在流体布局中使用HTML img srcset？

Srcset绝对是一个很好的方法来解决这个问题。基本上，您可以将多幅图像保存为多种尺寸，通常情况下，您希望图像的宽度尽可能与元素的宽度相同。然后，您为每个屏幕宽度设置要使用的图像。

srcset="

/img-2400.jpg 2400w,

/img-1800.jpg 1800w,

/img-1200.jpg 1200w,

/img-900.jpg 900w,

/img-600.jpg 600w,

/img-400.jpg 400w"

sizes = "(min-width: 2400px) 900px,

(min-width: 1800px) 600px,

(min-width: 1200px) 500px,

(min-width: 900px) 500px,

(min-width: 600px) 600px,

400px" />

所以/img-2400.jpg 2400w将使用/img-2400.jpg当屏幕最接近2400px宽。

在sizes属性中，还可以指定图像大小是否在特定的屏幕大小下，因为它可能不总是100％的浏览器宽度。

所以(min-width: 2400px) 900px告诉浏览器，当窗口宽度至少为2400px时，屏幕上的图像宽度为900px。所以这应该是告诉浏览器然后抓取/img-900.jpg当窗口是2400px宽因为该图像设置为900w这是最接近900px(其确切)。

如果您使用的是em，通过将您使用的em乘以16(这可能取决于您在css中实施的浏览器设置或设置)，您仍然可以近似计算此值。所以如果你设置你的图像在css中的宽度为20em，那就是16 * 20 = 320px。

当这些结合使用时，现代浏览器应该能够根据屏幕尺寸检测出最佳图像。浏览器兼容srcset在这里：https://caniuse.com/#search=srcset