缩略图/Thumbnail
最后更新于:2022-04-01 22:22:14
# 缩略图/Thumbnail
创建拥有各种不同样式和尺寸的缩略图。
## 用法
要使应用个组件,只需要添加 `.uk-thumbnail` 类到一个 `<img>`, `<a>` 或 `<figure>` 元素中。
### 示例
![](https://docs.gechiui.com/gc-content/uploads/sites/kancloud/2016-05-12_57346f34c5df1.jpg)
### Code
```
```
* * *
### 图片说明
添加 `.uk-thumbnail-caption` 类到一个 `<div>` 元素中,可以在图片下面添加一个图片说明。
#### 示例
![](https://docs.gechiui.com/gc-content/uploads/sites/kancloud/2016-05-12_57346f34d676d.jpg)
#### Code
```
```
* * *
## 尺寸调整
使用 `.uk-thumbnail-large`, `.uk-thumbnail-medium`, `.uk-thumbnail-small` 或 `.uk-thumbnail-mini` 类来调整图片的尺寸。在 [基础组件](http://getuikit.net/docs/base.html) 中要求图片默认地具有响应式性能。
### 示例
![](https://docs.gechiui.com/gc-content/uploads/sites/kancloud/2016-05-12_57346f34e7da4.jpg)
### Code
```
```
';
...
...
...
...
```
你甚至可以将缩放缩略图超出其正常大小,使其延伸到它的父元素的宽度。只需添加 `.uk-thumbnail-expand` 类即可。
### 示例
![](https://docs.gechiui.com/gc-content/uploads/sites/kancloud/2016-05-12_57346f3507fb6.jpg)
### Code
```
```
* * *
## 网格
你可以通过使用 [网格组件](http://getuikit.net/docs/grid.html) 轻松地创建带有缩略图的网格。
### 示例
![](https://docs.gechiui.com/gc-content/uploads/sites/kancloud/2016-05-12_57346f3518125.jpg)
### Code
```