Cмотреть на GitHub

Соответствие объекта

Используйте утилиты подгонки объекта, чтобы изменить содержимое заменяемого элемента, например <img> или <video> следует изменить размер, чтобы он соответствовал своему контейнеру.

На этой странице

Как это устроено

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

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

contain
cover
fill
scale (для уменьшения)
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> elements.

<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>

CSS

Sass API утилиты

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

scss/_utilities.scss

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