HTML 片段 · HTML
picture 响应式图片
说明
节省移动端流量。
复制后按项目类名、路径与域名微调即可。
代码
<picture>
<source media="(min-width: 800px)" srcset="hero-large.webp" type="image/webp">
<img src="hero-small.jpg" alt="示例图片" width="800" height="450">
</picture>
注意点
- 务必写 alt 与宽高
常见问题
这段代码可以直接用于生产吗?
可作为起点,请按项目规范、安全与兼容性评审后再上线。
和在线工具如何配合?
生成类需求可用 tool.251w.com;需要整站定制可联系 web.251w.com。
相关工具与服务
需要在线生成?tool.251w.com
需要定制开发:web.251w.com