缩略图/Thumbnail

创建拥有各种不同样式和尺寸的缩略图。

用法

要使应用个组件，只需要添加 .uk-thumbnail 类到一个 <img>, <a> 或 <figure> 元素中。

示例

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 类到一个 <div> 元素中，可以在图片下面添加一个图片说明。

示例

Caption <div>

Caption <a>

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 类来调整图片的尺寸。在 基础组件 中要求图片默认地具有响应式性能。

示例

.uk-thumbnail-large

.uk-thumbnail-medium

.uk-thumbnail-small

.uk-thumbnail-mini

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 类即可。

示例

.uk-thumbnail-expand

Code

<div class="uk-thumbnail uk-thumbnail-expand">...</div>

网格

你可以通过使用 网格组件 轻松地创建带有缩略图的网格。

示例

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>