HTML中的picture
标签可以设置以下属性:
srcset
: 设置不同分辨率下的图片路径,以逗号分隔。格式为路径 宽度描述符
,其中宽度描述符可以是像素值或者w单位。例如:srcset="small.jpg 320w, medium.jpg 640w, large.jpg 1024w"
sizes
: 定义媒体查询和对应的图片尺寸。格式为媒体查询 图片尺寸
,多个媒体查询可以用逗号分隔。例如:sizes="(max-width: 768px) 100vw, (min-width: 769px) 50vw"
type
: 指定图片的MIME类型。例如:type="image/jpeg"
alt
: 图片的替代文本。当图片无法显示时,将会显示替代文本。例如:alt="A beautiful sea landscape"
loading
: 指定图片的加载行为。可以设置为lazy
(延迟加载)或eager
(立即加载)。例如:loading="lazy"
其中,srcset
和sizes
是picture
标签最重要的属性,它们可以根据设备的屏幕大小和分辨率选择最佳的图片进行加载。