Учебник по 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 Свойство object-position


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


Изображение

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

Париж

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

Париж

Пример

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


Использование свойства object-position

Предположим, что отображаемая часть изображения расположена не так, как мы хотим. Чтобы расположить изображение, мы будем использовать object-positionсвойство.

Здесь мы будем использовать это object-positionсвойство, чтобы расположить изображение так, чтобы большое старое здание было в центре:

Париж

Пример

img {
  width: 200px;
  height: 300px;
  object-fit: cover;
  object-position: 80% 100%;
}

Здесь мы будем использовать это object-positionсвойство, чтобы расположить изображение так, чтобы знаменитая Эйфелева башня находилась в центре:

Париж

Пример

img {
  width: 200px;
  height: 300px;
  object-fit: cover;
  object-position: 15% 100%;
}

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

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

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