# 缩略图/Thumbnail 创建拥有各种不同样式和尺寸的缩略图。 ## 用法 要使应用个组件，只需要添加 `.uk-thumbnail` 类到一个 `&lt;img&gt;`, `&lt;a&gt;` 或 `&lt;figure&gt;` 元素中。 ### 示例  ### Code ``` <!-- This is an image as a thumbnail --> <img class="uk-thumbnail" src="" alt=""> <!-- This is an anchor as a thumbnail --> <a class="uk-thumbnail" href=""><img src="" alt=""></a> <!-- This is a figure as a thumbnail --> <figure class="uk-thumbnail"><img src="" alt=""></figure> ``` * * * ### 图片说明 添加 `.uk-thumbnail-caption` 类到一个 `&lt;div&gt;` 元素中，可以在图片下面添加一个图片说明。 #### 示例  #### Code ``` <!-- This is a div as a thumbnail with a caption --> <div class="uk-thumbnail"> <img src="" alt=""> <div class="uk-thumbnail-caption">...</div> </div> <!-- This is an anchor as a thumbnail with a caption --> <a class="uk-thumbnail" href=""> <img src="" alt=""> <div class="uk-thumbnail-caption">...</div> </a> <!-- This is a figure as a thumbnail with a caption --> <figure class="uk-thumbnail"> <img src="" alt=""> <figcaption class="uk-thumbnail-caption">...</figcaption> </figure> ``` * * * ## 尺寸调整 使用 `.uk-thumbnail-large`, `.uk-thumbnail-medium`, `.uk-thumbnail-small` 或 `.uk-thumbnail-mini` 类来调整图片的尺寸。在 [基础组件](http://getuikit.net/docs/base.html) 中要求图片默认地具有响应式性能。 ### 示例  ### Code ``` <div class="uk-thumbnail uk-thumbnail-large">...</div> <div class="uk-thumbnail uk-thumbnail-medium">...</div> <div class="uk-thumbnail uk-thumbnail-small">...</div> <div class="uk-thumbnail uk-thumbnail-mini">...</div> ``` 你甚至可以将缩放缩略图超出其正常大小，使其延伸到它的父元素的宽度。只需添加 `.uk-thumbnail-expand` 类即可。 ### 示例  ### Code ``` <div class="uk-thumbnail uk-thumbnail-expand">...</div> ``` * * * ## 网格 你可以通过使用 [网格组件](http://getuikit.net/docs/grid.html) 轻松地创建带有缩略图的网格。 ### 示例  ### Code ``` <div class="uk-grid"> <div class="uk-width-medium-1-2"><img class="uk-thumbnail" src="" alt=""></div> <div class="uk-width-medium-1-2"> <div class="uk-grid"> <div class="uk-width-medium-1-2"><img class="uk-thumbnail" src="" alt=""></div> <div class="uk-width-medium-1-2"><img class="uk-thumbnail" src="" alt=""></div> </div> </div> ```