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

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

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

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

• contain
• cover
• fill
• scale (для уменьшения)
• none

Примеры

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

html

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

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

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

html

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

Видео

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

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

CSS

Sass API утилиты

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

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