设置响应式图片:
<picture>
元素或srcset
属性来为不同的设备和视口尺寸提供不同的图片版本。<picture>
元素允许你根据不同的条件(如浏览器支持、视口宽度等)提供多种媒体资源。srcset
属性允许你指定多个图像版本,浏览器会根据设备能力和视口宽度选择合适的版本。复制代码
html`<!-- 使用 <picture> 元素 --> | |
<picture> | |
<source srcset="large.jpg" media="(min-width: 1000px)"> | |
<img src="small.jpg" alt="描述"> | |
</picture> | |
<!-- 使用 srcset 属性 --> | |
<img srcset="small.jpg 500w, medium.jpg 1000w, large.jpg 2000w" | |
sizes="(max-width: 500px) 500px, (max-width: 1000px) 1000px, 2000px" | |
src="fallback.jpg" alt="描述">` |