Обложка

Развернуть изображение или видео, чтобы охватить весь контейнер.

Этот компонент позволяет Вам создавать полноэкранные тизеры с использованием изображений, объектов или даже элементы 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

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

Пример

Разметки

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

Адаптивный

Чтобы добавить aдаптивный поведение вашей картинки обложки, вам нужно добавить .uk-invisible класс к <img> элемент и поместите его внутри вашего элемента обложки. Это позволит адаптировать aдаптивный поведение изображения.

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

Пример

Placeholder

Разметки

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

Видео

Добавить такое же поведение на видео, вам также потребуется добавить .uk-position-relative класс к cover контейнеру и .uk-position-absolute класс к cover объекту. То же самое касается окон 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 класс Утилита компонент к контейнеру элемента после вашего изображения или видео. Если вы хотите центрирования содержимого по вертикали и горизонтали, просто используйте Компонента Flex.

Пример

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>