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

Cover: Применение

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

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

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

• Результат
• Разметка

<div class="uk-cover-container uk-height-medium">
    <img src="images/dark.webp" 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="/video/bbb/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="images/dark.webp" alt="Обложка" loading="lazy" uk-cover>
</div>

• Результат
• Разметка

<div class="uk-cover-container">
    <canvas width="400" height="600"></canvas>
    <img src="images/dark.webp" alt="Обложка" loading="lazy" uk-cover>
</div>

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

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

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

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

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

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

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

JavaScript

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

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

UIkit.cover(element, options);