CSS Объектно-ориентированное свойство


Свойство CSS object-fit используется для указания того, как изменить размер <img> или <video> для соответствия его контейнеру.
Это свойство сообщает содержимому заполнить контейнер различными способами; такие как «сохранить это соотношение сторон» или «растягивать и занимать как можно больше места».
Посмотрите на следующее изображение из Парижа, которое составляет 400x300 пикселей:
Однако, если мы создадим изображение выше 200x400 пикселей, оно будет выглядеть так:

img { width: 200px; height: 400px;
}
Мы видим, что изображение сжимается, чтобы соответствовать контейнеру размером 200x400 пикселей, а его исходное соотношение сторон разрушено.
Если мы object-fit: cover; его используем, он обрезает стороны изображения, сохраняя соотношение сторон, а также заполняя пространство, например:

Другой пример

Здесь у нас есть два изображения, и мы хотим, чтобы они заполнили ширину 50% окна браузера и 100% высоты.
В следующем примере мы НЕ используем object-fit, поэтому при изменении размера окна браузера соотношение сторон изображений будет уничтожено:

В следующем примере мы используем object-fit: cover;, поэтому при изменении размера окна браузера соотношение сторон изображений сохраняется:

Все значения свойства объекта Object-fit

object-fit Свойство может иметь следующие значения:
  • fill- Это значение по умолчанию. Замененное содержимое имеет размер, чтобы заполнить поле содержимого элемента. Если необходимо, объект будет растянут.
  • contain - Замененное содержимое масштабируется для поддержания его соотношения сторон при установке в поле содержимого элемента
  • cover- Заменяемое содержимое имеет размер, чтобы поддерживать его соотношение сторон при заполнении поля содержимого всего элемента. Объект будет обрезан, чтобы соответствовать
  • none - Замененное содержимое не изменяется
  • scale-down - Содержимое имеет размер, как если бы ни один или не был указан (это приведет к меньшему размеру конкретного объекта)
Следующий пример демонстрирует все возможные значения object-fit свойства:
.fill {object-fit: fill;}
.contain {object-fit: contain;}
.cover {object-fit: cover;}
.scale-down {object-fit: scale-down;}
.none {object-fit: none;}

Материал добавил

7FV

Связь со мной
Телеграм: aslan7f
Скайп: не указан
Добавил статей 35
Группа
Web Дизайнер
Немного обо мне
Всем привет ребят!
Предлагаю услуги по верстке сайтов, доработке уже существующих шаблонов, написание шаблонов с нуля.

Конечно же у вас возникает сразу вопрос, кто я, где мое портфолио и т.д.
Отвечу на этот вопрос:
Кто же я такой? - Я обычный растаман, который накурившись верстает сайты уже лет так 9, рисует иконки, визитки, банеры, логотипы, ретуширует фотографии.

Зарабатываю я на этом? - Скорей нет чем да. Это мое хобби, мне просто нравится все что связано с веб дизайном. Я не говорю что бесплатно все делаю,хотя порой если мне нравится проект и сам клиент как человек, тогда я могу бесплатно поддерживать, помогать с его проектом.
Исправить недочеты в статье

Для того что бы исправить текст новости, просто выделите нужное место и нажмите ctrl + enter

Добавить комментарий

Имя:*
E-Mail:
Введите два слова, показанных на изображении: *