# 图片

纯样式组件：不需要 JS，写好标记即可。图片的响应式与外观：zh-img 让图片不超出容器、保持比例；--rounded 圆角，--circle 正圆（头像），--thumb 带边框的缩略图。配图说明用 <figure> 加 zh-figure。

**依赖**：`zhaoui.css` 与 `zhaoui.js`（原生 HTML、CSS、JS，不需要框架或 jQuery）。

## 用法

```html
<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`、`zh-img--rounded`、`zh-img--circle`、`zh-img--thumb`、`zh-figure`

## 属性

| 属性 | 用在 | 取值 | 说明 |
|---|---|---|---|
| `zh-img` | <img>（class） |  | 宽度不超过容器，高度按比例 |
| `zh-img--rounded / --circle / --thumb` | .zh-img |  | 圆角 / 正圆裁切 / 带边框内边距的缩略图 |
| `zh-figure` | <figure>（class） | 里面放图片和 <figcaption> | 说明文字居中显示在图片下方 |

## 无障碍

- 所有 <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。