返回介绍

缩略图

发布于 2019-05-26 16:28:22 字数 2453 浏览 851 评论 0 收藏 0

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

用法

要使应用个组件,只需要添加 .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> 元素中,可以在图片下面添加一个图片说明。

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

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

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

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。
列表为空,暂无数据
    我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
    原文