Компонент Cover

• Использование
• Видео
• Iframe
• Картинка по размеру блока
• Фоновое видео
• Контент на изображении

Компонент Cover позволяет создавать полноэкранные тизеры с использованием изображений, объектов или даже фреймов. Независимо от того, какого рода элемент, он всегда будет центрироваться по вертикали и горизонтали и покрывать свой контейнер, не теряя своих пропорций. Вы также можете разместить дополнительный контент, например текст или изображение, поверх изображения или видео.

Использование

Компонент Cover применяется по-разному, в зависимости от того, используете ли вы фоновое изображение, объект или фрейм. Самый простой способ - добавить класс .uk-cover-background к элементу <div> с фоновым изображением.

Пример (cover-background)

<div class="uk-cover-background" style="background-image: url(/image.jpg);"
    ...
</div>

Видео

Чтобы создать видео, которое растягивается и занимает весь родительский контейнер, добавьте к video класс .uk-cover-object. Оберните контейнером с необходимыми шириной и высотой элемент вокруг видео и добавьте класс .uk-cover, чтобы обрезать содержимое.

Пример

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

Iframe

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

Пример

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

Картинка по размеру блока

Чтобы добавить адаптивное «резиновое» поведение изображению, нужно добавить класс .uk-invisible к элементу <img> и поместить его внутрь родительского элемента с классом .uk-cover-background. Таким образом, он создаст адаптивное поведение изображения по размеру родительского блока.

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

Пример

<div class="uk-cover-background"> <!-- фоновая картинка -->
    <img class="uk-invisible" src="" width="" height="" alt=""> <!-- скрытое изображение, как основа -->
</div>

Пример (height-viewport)

<div class="uk-cover-background"> <!-- фоновая картинка -->
    <img class="uk-invisible uk-height-viewport" src="" width="" height="" alt=""> <!-- скрытое изображение, как основа -->
</div>

Фоновое видео

Чтобы добавить такое же поведение к видео, вам также нужно добавить класс .uk-position-relative в контейнер обложки и класс .uk-position-absolute в объект обложки.
То же самое относится и к фреймам.

Пример

<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 из компонента Utility в элемент контейнера после вашего изображения или видео.

Пример

Радость-то какая!

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