srcset
属性在img
标签中的作用主要是为了实现响应式图片,使得在不同的设备或者不同的分辨率下,都能够展示适应的图片效果。
srcset
属性允许你为一张图片定义多个源,这样浏览器就可以根据当前设备的特性(例如视口宽度、设备像素比等)来选择最合适的图片进行渲染。
srcset
属性的使用方法如下:
<img srcset="img-320w.jpg 320w,
img-480w.jpg 480w,
img-800w.jpg 800w"
sizes="(max-width: 320px) 280px,
(max-width: 480px) 440px,
800px"
src="img-800w.jpg" alt="responsive image">
在上面的例子中,srcset
定义了三个不同的图片源,320w
, 480w
, 800w
分别代表这三张图片的宽度。sizes
属性定义了在不同的视口宽度下,图片所应占据的展示空间的宽度。
如果浏览器不支持srcset
属性,那么就会回退到src
属性指定的图片源。
在使用srcset
时,需要确保你提供的每一个图片源,都要有相应的尺寸描述符(例如上面例子中的320w
),这样浏览器才能正确的选择最合适的图片源。
发表回复
要发表评论,您必须先登录。