Компонент Обложка Cover
Охватив весь контейнер, разверните изображения, видео или фреймы, и разместите сверху свой собственный контент. Растянуть блок на всю видимую высоту экрана.
Применение
Как использовать, растянуть
Чтобы изображение заполняло весь его родительский элемент, добавьте к родительскому элементу класс .uk-cover-container
, а к изображению атрибут uk-cover
.
<div class="uk-cover-container">
<img src="" alt="" uk-cover>
</div>
Чтобы расположить какой-либо контент поверх заполненного элемента (обложки),
используйте компонент для позиционирования контента.
Чтобы адаптировать контент к светлым или темным фонам, для лучшей видимости,
добавьте класс .uk-light
или .uk-dark
из компонента Инверсия
Видео
Чтобы создать видео, которое покрывает весь его родительский контейнер,
добавьте к видео атрибут 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&controls=0&showinfo=0&rel=0&loop=1&modestbranding=1&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>
JavaScript
Узнайте больше о использовании JavaScript в компонентах фреймворка UIkit 3.
Инициализация
UIkit.cover(element, options);