搜索

+

95

-

html5页面的img图片如何随着不同的dpi始终显示清晰的图片？

html5 css

html5页面的img图片如何随着不同的dpi始终显示清晰的图片？

网友回复

+

15

-

1. 为img标签指定多个src属性,每个src对应一张不同清晰度的图片:

<img src="low_res.jpg"
srcset="mid_res.jpg 2x, high_res.jpg 3x"
sizes="(max-width: 600px) 90vw,
(max-width: 1000px) 45vw,
30vw"
alt="...">

- src指定默认加载的图片,适用于低清晰度屏幕。

- srcset指定高清晰度屏幕下加载的图片,2x和3x后缀表示在2倍和3倍屏幕下加载。

- sizes指定在不同视口宽度下img占据的宽度,帮助浏览器选择合适的图片加载。

2. 使用pict...

点击查看剩余70%

我知道答案，我要回答

我有问题

最新提问