Компонент Обложка 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="/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>

UIkit.cover(element, options);