ЛУЧШИЙ САЙТ ДЛЯ ВЕБ-РАЗРАБОТЧИКОВ

CSS Учебник

CSS СТАРТ CSS Введение CSS Синтаксис CSS Селекторы CSS Как подключить CSS Цвета CSS background-color CSS border CSS margin CSS padding CSS height/width CSS Блочная модель CSS Контур CSS Текст CSS Шрифты CSS Иконки CSS Ссылки CSS Списки CSS Таблицы CSS display CSS max-width CSS position CSS overflow CSS float/clear CSS inline-block CSS Выравнивание CSS Комбинаторы CSS Псевдо-классы CSS Псевдо-элементы CSS opacity/transparency CSS Панель навигации CSS Выпадающие списки CSS Галерея изображений CSS Спрайты изображений CSS Селекторы атрибутов CSS Формы CSS Счётчики CSS Макет веб-сайта CSS Единицы CSS Специфичности

CSS Продвинутый

CSS Закругленные углы CSS Границы изображения CSS Фоны CSS Цвета CSS Градиенты CSS Тени CSS Эффекты текста CSS Веб-шрифты CSS 2D Трансформации CSS 3D Трансформации CSS Переходы CSS Анимации CSS Подсказки CSS Стили изображений CSS Подгонка объекта CSS Кнопки CSS Нумерация страниц CSS Несколько столбцов CSS Пользовательский интерфейс CSS Переменные CSS Размеры блоков CSS Флексбокс CSS Медиа-запросы CSS Примеры медиа-запросов

CSS Адаптивный

RWD Введение RWD Область просмотра RWD Вид сетки RWD Медиа-запросы RWD Изображения RWD Видео RWD Фреймворки RWD Шаблоны

CSS Grid (Сетка)

Grid Введение Grid Контейнер Grid Элементы

CSS Примеры

CSS Шаблоны CSS Примеры CSS Викторина CSS Упражнения CSS Сертификат

CSS Справочники

CSS Справочник CSS Селекторы CSS Функции CSS Справочник аудио CSS Безопасные веб-шрифты CSS Анимация CSS Единицы CSS PX-EM Конвертер CSS Цвета CSS Значения цвета CSS Значения по умолчанию CSS Поддержка браузерами

CSS3. Уроки для начинающих

CSS Свойство object-fit


CSS свойство object-fit используется, чтобы указать, как <img> или <video> нужно изменить размер, чтобы соответствовать его контейнеру.

Object-fit - в пер. с анг. - подгонка объекта.


Поддержка браузерами

Числа в таблице указывают первую версию браузера, которая полностью поддерживает свойство.

Свойство
object-fit 31.0 16.0 36.0 7.1 19.0

CSS свойство object-fit

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

Это свойство указывает содержимому заполнять контейнер различными способами; такие как "сохранить это соотношение сторон" или "растянуть и занять как можно больше места".

Посмотрите на следующее изображение из Парижа, размером 400x300 пикселей:

Paris

Однако, если мы добавим изображение более 200x400 пикселей, оно будет выглядеть так:

Париж

Пример

img {
  width: 200px;
  height: 400px;
}
Попробуйте сами »

Мы видим, что изображение сжимается, чтобы уместиться в контейнер размером 200x400 пикселей, и его исходное соотношение сторон нарушается.

Если мы используем object-fit: cover; - это обрезает стороны изображения, сохраняя пропорции, а также заполняя пространство, как на изображении ниже:

Paris

Пример

img {
  width: 200px;
  height: 400px;
  object-fit: cover;
}
Попробуйте сами »

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

Здесь у нас есть два изображения, и мы хотим, чтобы они занимали 50% ширины окна браузера и 100% высоты.

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

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


Все значения CSS свойства 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;}
Попробуйте сами »