Cover

让图片、视频或 iframe 扩展铺满其整个容器，并在上面放置你自己的内容。

用法

要让图片铺满其父元素，为父元素添加 .uk-cover-container 类，并为图片添加 uk-cover 属性。

<div class="uk-cover-container">
    <img src="" alt="" uk-cover>
</div>

注意要把内容定位在铺满元素的上层，请使用定位组件。为了让内容更易辨识，可以添加反色组件中的 .uk-light 或 .uk-dark 类。

<div class="uk-cover-container uk-height-medium">
    <img src="images/dark.jpg" alt="" uk-cover>
</div>

视频

要创建一个铺满其父容器的视频，为视频添加 uk-cover 属性。在视频外面套一个容器元素，并添加 .uk-cover-container 类以裁剪内容。

Cover 组件继承视频组件的所有属性，这意味着视频会静音并自动播放。视频不可见时会暂停，重新可见后继续播放。

<div class="uk-cover-container">
    <video uk-cover></video>
</div>

<div class="uk-cover-container uk-height-medium">
    <video src="https://yootheme.com/media/videos/yootheme-pro.mp4" autoplay loop muted playsinline uk-cover></video>
</div>

Iframe

要把 Cover 组件应用于 iframe，需要为 iframe 添加 uk-cover 属性。再为 iframe 外的容器元素添加 .uk-cover-container 类以裁剪内容。

<div class="uk-cover-container">
    <iframe src="" uk-cover></iframe>
</div>

<div class="uk-cover-container uk-height-medium">
    <iframe src="https://www.youtube-nocookie.com/embed/c2pz2mlSfXA?playsinline=1&amp;rel=0&amp;controls=0&amp;loop=1" width="1920" height="1080" allowfullscreen uk-cover></iframe>
</div>

响应式高度

要为封面图片添加响应式行为，需要创建一个不可见的 <canvas> 元素，并按照你希望覆盖区域保持的宽高比为其指定 width 和 height 值。这样它就会沿用图片的响应式行为。

<div class="uk-cover-container">
    <canvas width="" height=""></canvas>
    <img src="" alt="" uk-cover>
</div>

<div class="uk-cover-container">
    <canvas width="400" height="200"></canvas>
    <img src="images/dark.jpg" alt="" uk-cover>
</div>

视口高度

添加高度组件中的 uk-height-viewport 属性，会将父元素的高度拉伸以填满整个视口。

<div class="uk-cover-container" uk-height-viewport>
    <img src="" alt="" uk-cover>
</div>

组件选项

这些选项都可以应用于组件属性。多个选项之间用分号分隔。了解更多

选项	值	默认	描述
`automute`	Boolean	true	尝试将 iframe 中的视频自动静音。
`width`	Number		元素的宽度。
`height`	Number		元素的高度。

JavaScript

了解更多关于 JavaScript 组件的信息。

初始化

UIkit.cover(element, options);

文档

Cover