Object fit

Как это работает

Измените значение свойства object-fit с помощью наших адаптивных утилитарных классов object-fit. Это свойство указывает содержимому заполнить родительский контейнер различными способами, такими как сохранение соотношения сторон или растягивание для занятия максимально возможного пространства.

Классы для значения object-fit именуются с использованием формата .object-fit-{value}. Выберите из следующих значений:

• contain
• cover
• fill
• scale (для scale-down)
• none

Примеры

Добавьте класс object-fit-{value} к заменяемому элементу:

html

<img src="..." class="object-fit-contain border rounded" alt="...">
<img src="..." class="object-fit-cover border rounded" alt="...">
<img src="..." class="object-fit-fill border rounded" alt="...">
<img src="..." class="object-fit-scale border rounded" alt="...">
<img src="..." class="object-fit-none border rounded" alt="...">

Адаптивность

Адаптивные варианты также существуют для каждого значения object-fit с использованием формата .object-fit-{breakpoint}-{value}, для следующих сокращений точек останова: sm, md, lg, xl и xxl. Классы можно комбинировать для различных эффектов по мере необходимости.

html

<img src="..." class="object-fit-sm-contain border rounded" alt="...">
<img src="..." class="object-fit-md-contain border rounded" alt="...">
<img src="..." class="object-fit-lg-contain border rounded" alt="...">
<img src="..." class="object-fit-xl-contain border rounded" alt="...">
<img src="..." class="object-fit-xxl-contain border rounded" alt="...">

Видео

Утилиты .object-fit-{value} и адаптивные .object-fit-{breakpoint}-{value} также работают с элементами <video>.

<video src="..." class="object-fit-contain" autoplay></video>
<video src="..." class="object-fit-cover" autoplay></video>
<video src="..." class="object-fit-fill" autoplay></video>
<video src="..." class="object-fit-scale" autoplay></video>
<video src="..." class="object-fit-none" autoplay></video>

Utilities API

Утилиты object fit объявлены в нашем utilities API в scss/_utilities.scss. Узнайте, как использовать utilities API.

    "object-fit": (
      responsive: true,
      property: object-fit,
      values: (
        contain: contain,
        cover: cover,
        fill: fill,
        scale: scale-down,
        none: none,
      )
    ),