Компонент Обложка 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/app/media/demo-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&amp;controls=0&amp;showinfo=0&amp;rel=0&amp;loop=1&amp;modestbranding=1&amp;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);