Компонент Обложка Cover

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

Применение

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

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

<div class="uk-cover-container">
    <img src="" 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="" title="" 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" title="Iframe" loading="lazy" 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="Обложка" loading="lazy" uk-cover>
    </div>
  • Обложка
  • <div class="uk-cover-container">
        <canvas width="400" height="600"></canvas>
        <img src="/demo/img/dark.jpg" alt="Обложка" loading="lazy" uk-cover>
    </div>

Заполнить по высоте

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

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

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

Параметры для атрибута

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

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

Опция Значение По умолчанию Описание
automute Boolean true Пытается автоматизировать iframe-видео.
width Number Ширина элемента.
height Number Высота элемента.

JavaScript

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

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

UIkit.cover(element, options);