Обложка
Развернуть изображение или видео, чтобы охватить весь контейнер.
Этот компонент позволяет Вам создавать полноэкранные тизеры с использованием изображений, объектов или даже элементы 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
класс Утилита компонент будет растягиваться в высоту родительского элемента, чтобы заполнить всю область просмотра.
Пример
Разметки
<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.
Пример
Разметки
<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>