封面

扩展图像或视频以覆盖其整个容器。

此组件允许您使用图像、对象甚至 iframe 创建全屏预告片。无论是什么类型的元素，它都将始终垂直和水平居中，并覆盖其容器而不会失去其比例。您还可以在图像或视频的顶部放置其他内容，例如文本或图像。

用法

封面组件的应用方式不同，具体取决于您使用的是背景图像、对象还是 iframe。最简单的方法是将 .uk-cover-background 类添加到带有背景图像的 <div> 元素。

示例

标记

<div class="uk-cover-background">...</div>

视频

要创建覆盖其父容器的视频，请将 .uk-cover-object 类添加到视频。将容器元素包裹在视频周围，并添加 .uk-cover 类来剪切内容。

示例

标记

<div class="uk-cover">
    <video class="uk-cover-object" width="" height="">
        <source src="" type="">
    </video>
</div>

Iframe

要将封面组件应用于 iframe，您只需将 data-uk-cover 属性添加到 iframe。现在您只需将 .uk-cover 类添加到 iframe 周围的容器元素即可剪切内容。

示例

标记

<div class="uk-cover">
    <iframe data-uk-cover src="" width="" height="" frameborder="0" allowfullscreen></iframe>
</div>

响应式

要为您的封面图像添加响应式行为，您需要将 .uk-invisible 类添加到 <img> 元素并将其放置在您的封面元素内。这样它将适应图像的响应式行为。

注意从 实用工具组件 添加 .uk-height-viewport 类会将父元素的高度拉伸以填充整个视口。

示例

标记

<div class="uk-cover-background">
    <img class="uk-invisible" src="" width="" height="" alt="">
</div>

视频

要为视频添加相同的行为，您还需要将 .uk-position-relative 类添加到封面容器，并将 .uk-position-absolute 类添加到封面对象。这同样适用于 iframe。

示例

标记

<div class="uk-cover uk-position-relative">
    <img class="uk-invisible" src="" width="" height="" alt="">
    <video class="uk-cover-object uk-position-absolute" width="" height="">
        <source src="" type="">
    </video>
</div>

定位内容

您还可以将内容绝对定位在覆盖元素的顶部。为此，只需在图像或视频之后将 实用工具组件 中的 .uk-position-cover 类添加到容器元素。如果您想垂直和水平居中内容，只需使用 弹性布局组件。

示例

Bazinga!

标记

<div class="uk-cover-background uk-position-relative">
    <img class="uk-invisible" src="" width="" height="" alt="">
    <div class="uk-position-cover uk-flex uk-flex-center uk-flex-middle">...</div>
</div>