Компонент Cover

Охватив весь контейнер, разверните изображения, видео или фреймы, и разместите сверху свой собственный контент.

Как использовать, растянуть

Чтобы изображение заполняло весь его родительский элемент, добавьте к родительскому элементу класс .uk-cover-container, а к изображению атрибут uk-cover.

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

Чтобы расположить какой-либо контент поверх заполненного элемента (обложки), используйте компонент для позиционирования контента. Чтобы адаптировать контент к светлым или темным фонам, для лучшей видимости, добавьте класс .uk-light или .uk-dark из компонента Инверсия

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

Видео

Чтобы создать видео, которое покрывает весь его родительский контейнер, добавьте к видео атрибут uk-cover. Оберните видео в контейнер c классом .uk-cover-container, чтобы обрезать содержимое.

Компонент Cover наследует все свойства из компонента Видео, что означает, что видео изначально отключено и воспроизводится автоматически.

Видео будет приостановлено, когда оно не в поле зрения, и возобновится, как только оно снова станет видимым.

<div class="uk-cover-container">
    <video uk-cover></video>
</div>
  • <div class="uk-cover-container uk-height-medium">
        <video src="/storage/video/big_buck_bunny.mp4" autoplay loop muted playsinline uk-cover></video>
    </div>

Iframe

Чтобы применить компонент Cover к iframe, необходимо добавить к iframe атрибут uk-cover. Теперь добавьте класс .uk-cover-container к элементу контейнера вокруг iframe, чтобы обрезать содержимое.

<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/SkVqJ1SGeL0?autoplay=1&controls=0&showinfo=0&rel=0&loop=1&modestbranding=1&wmode=transparent" width="1920" height="1080" frameborder="0" allowfullscreen uk-cover></iframe>
    </div>

Отзывчивая высота

Чтобы добавить адаптивное поведение cover-изображению, вам нужно создать невидимый элемент <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="300"></canvas>
        <img src="/demo/img/dark.jpg" alt="" uk-cover>
    </div>
  • <div class="uk-cover-container">
        <canvas width="400" height="600"></canvas>
        <img src="/demo/img/dark.jpg" alt="" uk-cover>
    </div>

Как растянуть блок на всю высоту экрана

Добавление атрибута uk-height-viewport из компонента Высота растянет высоту родительского элемента заполнив всю область просмотра.

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

Опции компонента

При использовании компонента Cover к атрибуту можно применить любой из этих параметров. Разделяйте несколько вариантов точкой с запятой. Для получения дополнительной информации ознакомьтесь с главой Конфигурация компонента.

Опция Значение По умолчанию Описание
automute Boolean true Tries to automute the iframe's video.
width Number undefined Ширина элемента.
height Number undefined Высота элемента.

JavaScript

Узнайте больше о компонентах JavaScript в фреймворке UIkit 3.

Инициализация

UIkit.cover(element, options);
Документация
Компоненты