图片
图片的响应式与外观：zh-img 让图片不超出容器、保持比例；--rounded 圆角，--circle 正圆（头像），--thumb 带边框的缩略图。配图说明用 <figure> 加 zh-figure。
纯样式 核心包
示例
代码
<figure class="zh-figure" style="max-width:16rem">
<img class="zh-img zh-img--rounded" alt="示例配图" width="320" height="180" src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 9'%3E%3Crect width='16' height='9' fill='%23c7d2fe'/%3E%3C/svg%3E">
<figcaption>图 1 示例配图</figcaption>
</figure>属性
| 属性 | 用在 | 取值 | 说明 |
|---|---|---|---|
zh-img | <img>（class） | 宽度不超过容器，高度按比例 | |
zh-img--rounded / --circle / --thumb | .zh-img | 圆角 / 正圆裁切 / 带边框内边距的缩略图 | |
zh-figure | <figure>（class） | 里面放图片和 <figcaption> | 说明文字居中显示在图片下方 |
样式类
zh-img zh-img--rounded zh-img--circle zh-img--thumb zh-figure
无障碍
- 所有 <img> 都要写 alt；装饰图用 alt=""
- 写上 width 和 height，避免加载时页面跳动
常见问题
图片是什么？
图片的响应式与外观：zh-img 让图片不超出容器、保持比例；--rounded 圆角，--circle 正圆（头像），--thumb 带边框的缩略图。配图说明用 <figure> 加 zh-figure。
怎么使用图片？
先在页面里引入 zhaoui.css 和 zhaoui.js（放在 </body> 前，不加 defer），再照本页「用法」里的标记书写。
图片支持键盘和读屏吗？
所有 <img> 都要写 alt；装饰图用 alt=""；写上 width 和 height，避免加载时页面跳动。
图片需要依赖框架吗？
不需要。ZhaoUI 是原生 HTML、CSS 和 JavaScript，不依赖 jQuery、Vue 或 React。