缩略图

创建不同样式的缩略图图像，它们具有各种样式和尺寸。

用法

要应用此组件，只需将 .uk-thumbnail 类添加到 <img>、<a> 或 <figure> 元素即可。

示例

标记

<!-- 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> 元素以在图像下方应用文本标题。

示例

标题 <div>

标题 <a>

标记

<!-- 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

标记

<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

标记

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

网格

您可以使用网格组件轻松创建带有缩略图的网格。

示例

标记

<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>
</div>