Учебник по CSS

ГЛАВНАЯ CSS Введение в CSS Синтаксис CSS Селекторы CSS CSS как сделать CSS-комментарии Цвета CSS CSS-фоны CSS границы CSS поля CSS-заполнение CSS высота/ширина Блочная модель CSS Схема CSS CSS-текст CSS-шрифты CSS-иконки CSS-ссылки CSS-списки CSS-таблицы Отображение CSS Максимальная ширина CSS Позиция CSS CSS Z-индекс CSS переполнение Плавающая CSS Встроенный блок CSS Выравнивание CSS Комбинаторы CSS Псевдокласс CSS CSS-псевдоэлемент Непрозрачность CSS Панель навигации CSS Выпадающие списки CSS Галерея изображений CSS Спрайты изображений CSS Селекторы атрибутов CSS CSS-формы CSS-счетчики CSS макет веб-сайта Единицы CSS Специфика CSS CSS! важно Математические функции CSS

CSS расширенный

CSS закругленные углы Изображения границ CSS CSS-фоны Цвета CSS Цветовые ключевые слова CSS CSS-градиенты CSS-тени Текстовые эффекты CSS Веб-шрифты CSS 2D-преобразования CSS CSS 3D-преобразования CSS-переходы CSS-анимации Подсказки CSS Изображения в стиле CSS Отражение изображения CSS CSS объект-подгонка CSS-позиция объекта Маскировка CSS CSS-кнопки Разбивка на страницы CSS Несколько столбцов CSS Пользовательский интерфейс CSS CSS-переменные Размер блока CSS Медиа-запросы CSS Примеры CSS MQ CSS флексбокс

CSS Отзывчивый

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

CSS -сетка

Введение в сетку Контейнер сетки Элемент сетки

CSS SASS

Учебник по SASS

Примеры CSS

CSS-шаблоны Примеры CSS css викторина CSS-упражнения Сертификат CSS

Ссылки на CSS

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

CSS Свойство объектной подгонки


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


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

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

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

Посмотрите на следующее изображение из Парижа. Это изображение имеет ширину 400 пикселей и высоту 300 пикселей:

Париж

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

Париж

Пример

img {
  width: 200px;
  height: 300px;
}

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

Вот здесь и появляется object-fitсвойство. object-fitСвойство может принимать одно из следующих значений:

  • fill- Это по умолчанию. Размер изображения изменяется, чтобы заполнить заданное измерение. При необходимости изображение будет растянуто или сжато, чтобы соответствовать
  • contain- Изображение сохраняет соотношение сторон, но его размер изменяется в соответствии с заданным размером.
  • cover- Изображение сохраняет соотношение сторон и заполняет заданное измерение. Изображение будет обрезано по размеру
  • none- Размер изображения не изменяется
  • scale-down- изображение уменьшено до самой маленькой версии noneили contain

Использование объектной подгонки: обложка;

Если мы используем object-fit: cover;изображение, оно сохраняет соотношение сторон и заполняет заданное измерение. Изображение будет обрезано по размеру:

Париж

Пример

img {
  width: 200px;
  height: 300px;
  object-fit: cover;
}


Использование объектной подгонки: содержите;

Если мы используем object-fit: contain;изображение, оно сохраняет соотношение сторон, но изменяется в соответствии с заданным размером:

Париж

Пример

img {
  width: 200px;
  height: 300px;
  object-fit: contain;
}

Использование объектной подгонки: заливка;

Если мы используем object-fit: fill;, размер изображения изменяется, чтобы заполнить заданное измерение. При необходимости изображение будет растянуто или сжато, чтобы соответствовать:

Париж

Пример

img {
  width: 200px;
  height: 300px;
  object-fit: fill;
}

Использование объектной подгонки: нет;

Если мы используем object-fit: none;изображение без изменения размера:

Париж

Пример

img {
  width: 200px;
  height: 300px;
  object-fit: none;
}

Использование объектной подгонки: уменьшение масштаба;

Если мы используем object-fit: scale-down;изображение, оно уменьшается до наименьшей версии noneили contain:

Париж

Пример

img {
  width: 200px;
  height: 300px;
  object-fit: scale-down;
}

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

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

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

Пример

Норвегия Париж

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

Пример

Норвегия Париж


 CSS объект-подгонка Дополнительные примеры

Следующий пример демонстрирует все возможные значения object-fitсвойства в одном примере:

Пример

.fill {object-fit: fill;}
.contain {object-fit: contain;}
.cover {object-fit: cover;}
.scale-down {object-fit: scale-down;}
.none {object-fit: none;}

Объект CSS-* Свойства

В следующей таблице перечислены свойства CSS object-*:

Property Description
object-fit Specifies how an <img> or <video> should be resized to fit its container
object-position Specifies how an <img> or <video> should be positioned with x/y coordinates inside its "own content box"