object fit cover что это
CSS The object-fit Property
Свойство CSS object-fit используется для указания того, как или следует изменить размер в соответствии с его контейнером.
Поддержка браузера
Номера в таблице указывают первую версию браузера, которая полностью поддерживает свойство.
Свойство объекта CSS-Fit
Свойство CSS object-fit используется для указания способа изменения размера или в соответствии с его контейнером.
Это свойство указывает содержимому заполнять контейнер различными способами; Например, «сохранить это соотношение сторон» или «растянуть и занять столько места, сколько возможно».
Посмотрите на следующее изображение из Парижа, которое является 400кс300 пикселей:
Однако, если мы стиль изображения выше, чтобы быть 200кс400 пикселей, он будет выглядеть так:
Пример
Мы видим, что изображение сжимается в соответствии с контейнером 200кс400 пикселей, и его исходное соотношение сторон уничтожается.
Если мы используем object-fit: cover; он будет отрезать стороны изображения, сохранение соотношения сторон, а также заполнение пространства, как это:
Пример
Другой пример
Здесь мы имеем 2 изображения и мы хотим их заполнить ширину 50% из окна браузера и 100% из высоты.
Пример
Пример
Все значения свойства объекта CSS-Fit
Свойство object-fit может иметь следующие значения:
В следующем примере демонстрируются все возможные значения object-fit Свойство:
Как использовать object-fit и background-size в CSS
Для начала давайте определимся с проблемой. Посмотрите на следующий рисунок:
Нормальное изображение, которое сжимается при использовании в HTML компоненте.
Почему это происходит?
Браузер заполняет содержащий изображение элемент заданным изображением. При этом у любого изображения есть свое соотношение сторон. И если соотношение сторон изображения отличается от указанных для него ширины и высоты, то результатом будет либо сжатое, либо растянутое изображение.
Мы видим это на следующем рисунке:
Соотношение сторон изображения отличается от размеров содержащего ее элемента, и изображение выводится растянутым.
Решение проблемы
Нам не всегда нужно добавлять изображение другого размера, если соотношение сторон изображения не совпадает с шириной и высотой контейнера. Прежде чем погрузиться в CSS-решения, мы хотим показать вам, как мы делали это в приложениях для редактирования изображений:
Сначала мы центрируем изображение вертикально, а затем фиксируем его в маске. Это сохраняет соотношение сторон изображения и предотвращает его от сжимания.
Теперь, когда мы понимаем, как это работает, давайте разберемся, как это работает в браузере.
CSS свойство object-fit
Давайте рассмотрим возможные значения.
object-fit: contain
В этом случае размер изображения будет изменен в соответствии с соотношением сторон контейнера. Если соотношение сторон изображения не совпадает с соотношением сторон контейнера, то оно будет дополнено черными каше.
При использовании object-fit: contain изображение будет либо подогнано под размеры контейнера, либо дополнено черными полосами (каше).
object-fit: cover
В этом случае размер изображения также будет изменен в соответствии с соотношением сторон контейнера, и если соотношение сторон изображения не соответствует размеру контейнера, оно будет обрезано по размеру.
При использовании object-fit: cover изображение будет либо подогнано под размеры контейнера, либо обрезано.
object-fit: fill
При этом значении размер изображения будет изменен в соответствии с соотношением сторон контейнера, и если соотношение сторон изображения не соответствует размеру контейнера, оно будет либо сжато, либо растянуто. Но мы этого не хотим.
При использовании object-fit: fill изображение будет либо подогнано под размеры контейнера, либо сжато/растянуто.
object-fit: none
При использовании object-fit: none размер изображения не будет изменен, если он не соответствует размеру контейнера.
Возможные значения свойства object-position
Свойство object-position работает аналогично свойству CSS background-position :
В большинстве случаев используется значение по умолчанию (т. е. «center» или «50% 50%»).
Ключевые слова top и bottom также работают, когда соотношение сторон контейнера по вертикали больше:
Сравнение object-position: top (слева) и object-position: bottom (справа).
Свойство background-size
Основное отличие свойства background-size заключается в том, что мы имеем дело с фоном, а не с HTML элементом ( img ).
Возможные значения background-size
background-size: auto
При значении auto изображение сохраняет свой оригинальный размер:
Следует помнить, что размер по умолчанию может привести к размытому изображению (если он слишком маленький).
background-size: cover
В этом случае размер изображения будет изменен таким образом, чтобы оно помещалось в контейнер. Если пропорции не совпадают, то изображение будет обработано таким образом, чтобы оно подошло под размеры контейнера.
При использовании background-size: cover обязательно учитывайте соотношение сторон изображения.
background-size: contain
В этом случае размер изображения будет изменен таким образом, чтобы оно помещалось в контейнер. Если соотношение сторон не совпадает, то изображение будет дополнено черными полосами (каше), как показано в следующем примере:
background-size: contain изменяет размер изображение, чтобы оно поместилось в контейнер.
Когда не следует использовать object-fit или background-size
Рассмотрим следующий пример, в котором изображению задана фиксированная высота:
Изображение справа слишком растянуто в ширину из-за фиксированной высоты и слишком широкого контейнера.
Если контейнер слишком широк, это приведет к результату, который мы видим на рисунке справа (изображение слишком широкое). Это происходит потому, что мы не задаем соотношение сторон.
Второй способ это использовать новое CSS свойство aspect-ratio :
Случаи использования и примеры
Аватары пользователей
Аватар пользователя без object-fit и с object-fit: cover
Список логотипов
Список клиентов бизнеса имеет важное значение. Обычно для этого используют их логотипы. Поскольку логотипы часто бывают разных размеров, нам нужен способ изменить их размер без искажения.
Использование object-fit: contain поможет подогнать под один размер логотипы клиентов не искажая их.
Миниатюра для статьи
Это очень распространенный вариант использования. Контейнер для миниатюры статьи может не всегда содержать изображение с одинаковым соотношением сторон. Эта проблема в первую очередь должна устраняться системой управления контентом (CMS), но это происходит не всегда.
Настройка миниатюры статьи при помощи object-fit: cover.
Задний фон заголовка статьи
В этом случае решение о том, использовать элемент img или фон CSS будет зависеть от следующего:
Основываясь на ответе на эти вопросы, мы можем решить, какой способ использовать. Если изображение важно:
Давайте предположим, что изображение важно, потому что это веб-сайт, связанный с едой.
Если изображение имеет чисто декоративную функцию, то мы можем использовать свойство background-image :
В этом случае код CSS будет короче. Стоит убедиться, что весь текст, отображаемый поверх изображения, хорошо виден.
Добавление фона к изображению при помощи object-fit: contain
В приведенном ниже примере у нас есть сетка изображений. Если соотношение сторон изображения и контейнера отличается, появится цвет фона.
Можно использовать object-fit: contain, чтобы добавить фоновый цвет изображению.
Видеоэлемент
Требовалось ли вам когда-нибудь установить видео в качестве фона? Если да, то вы, вероятно, хотели бы, чтобы оно занимало бы всю ширину и высоту родительского элемента.
У элемента video по умолчанию стоит значение object-fit: contain. Как видно на рисунке, в этом случае видео не заполняет полностью фон, даже если у него заданы свойства position: absolute, width: 100% и height: 100%.
Чтобы видео полностью заполнило родительский элемент, нам нужно переопределить значение по умолчанию у object-fit :
Заключение
Как вы, наверное, убедились, свойства object-fit и background-size очень полезны для обработки изображений с различными соотношениями сторон. Мы не всегда можем контролировать настройку идеальных размеров для каждого изображения, и именно здесь эти два CSS свойства незаменимы.
Надеемся, что данная статья была вам полезна. Спасибо, что дочитали ее до конца.
Знакомство с object-fit
При работе с веб-документами мы довольно часто сталкиваемся с задачей отображения изображений (или видео) разного размера в одном и том же месте. Предположим, что вы пишете приложение с динамической галереей, которая позволяет пользователю загружать свои файлы. Вы не можете гарантировать, что все будут загружать изображения с одинаковым соотношением сторон. Что же делать?
Если разрешить соотношению сторон заполнять все пространство элемента-контейнера, то в большинстве случае это будет выглядеть ужасно. А кадрировать и менять размеры динамически «на лету» может оказаться не в ваших силах. (Допустим, если вы работаете с CMS и имеете права только для редактирования содержимого страницы.)
Модуль «Изображения и замещаемое содержимое в CSS» позволяет нам использовать свойства object-fit, предназначенное для решения подобных проблем, и object-position, устанавливающее положение контента внутри элемента по горизонтали и вертикали.
Эти элементы неплохо поддерживаются современными браузерами (за исключением IE). В этой статье мы рассмотрим несколько примеров их использования.
Как работают object-fit и object-position?
1. contain : Размер контента (например, изображения) будет изменен, чтобы отобразить его целиком с сохранением первоначального соотношения сторон, но при этом уместиться в размеры, заданные элементом.
2. fill : Размер контента будет увеличен, чтобы заполнить размеры, заданные элементом, даже если при этом будет нарушено первоначальное соотношение сторон.
3. cover : Сохранение соотношения сторон контента, но изменение его ширины и высоты. Таким образом, контент полностью покрывает элемент. Меньшая из двух сторон изменяется до размеров контейнера, а большая – выходит за рамки элемента и обрезается.
4. none : Полностью игнорирует высоту или ширину, заданные контейнером, и просто использует оригинальный размер контента замещаемого элемента.
Примечание: перейдя по ссылке, вы можете увидеть несколько простых примеров позиционирования объектов.
Результат использования различных значений object-fit
Использование object-fit: contain для размещения изображений с полями (леттербоксинг):
Леттербоксингом называются те случаи, когда вам нужно сохранить соотношение сторон изображений на странице, но при этом умещать их в одном и том же месте. К примеру, вы используете CMS, которая позволяет загружать продукцию в интернет-магазин или изображения в галерею, и контент могут загружать многие авторы. Они могут загружать файлы приблизительно нужного размера, но размеры не всегда будут в точности совпадать, а вам необходимо размещать каждое изображение в пространстве определенного размера.
Кадрирование изображений с помощью object-fit:cover
Изменение соотношения сторон видео с помощью object-fit: fill
С другой стороны, мы также можем взять видео и насильно изменить его соотношение сторон. Возможно, в некоторых видео, присланных вашим редактором контента, задано неправильное соотношение сторон, и вы хотите исправить его на лету, одним движением руки?
Возьмите этот кадр:
Если мы вставим его на страницу, используя этот код:
Интересные эффекты с использованием transition
Сначала отображается лишь небольшая часть изображения, а при выборе/наведении курсора на элемент он увеличивается, демонстрируя изображение целиком (пример использования object-fit: none).
Пример галереи
Клик по полноразмерному изображению заставит картинку опять исчезнуть.
Все размеры устанавливаются в процентах, поэтому сетка сохраняет свои пропорции при любом размере экрана.
P.S. Это тоже может быть интересно:
Если вам понравилась статья, поделитесь ей!
CSS Свойство object-fit
CSS свойство object-fit используется, чтобы указать, как или нужно изменить размер, чтобы соответствовать его контейнеру.
Поддержка браузерами
Числа в таблице указывают первую версию браузера, которая полностью поддерживает свойство.
CSS свойство object-fit
CSS свойство object-fit используется, чтобы указать, как или должны быть изменены, чтобы соответствовать его контейнеру.
Это свойство указывает содержимому заполнять контейнер различными способами; такие как «сохранить это соотношение сторон» или «растянуть и занять как можно больше места».
Посмотрите на следующее изображение из Парижа, размером 400×300 пикселей:
Однако, если мы добавим изображение более 200×400 пикселей, оно будет выглядеть так:
Пример
Мы видим, что изображение сжимается, чтобы уместиться в контейнер размером 200×400 пикселей, и его исходное соотношение сторон нарушается.
Пример
Другой пример
Здесь у нас есть два изображения, и мы хотим, чтобы они занимали 50% ширины окна браузера и 100% высоты.
Пример
Пример
Все значения CSS свойства object-fit
Свойство object-fit может иметь следующие значения:
В следующем примере демонстрируются все возможные значения свойства object-fit :
Пример
CSS Object-* Свойства
В следующей таблице перечислены CSS свойства object-* :
Управление размерами изображений в CSS
Сохранение соотношения сторон предотвращает искажение изображений из-за растяжения или сжатия. Работая с CSS, вы, вероятно, рано или поздно попадете в ситуацию, когда вам будет нужно сохранить исходное соотношение сторон изображения. Очень часто для решения этой проблемы используется CSS-свойство background-image. Есть и более современный подход – это свойство object-fit.
В этом руководстве мы поговорим о таких значениях object-fit, как fill, cover, contain, none и scale-down. Мы обсудим, как они влияют на изображение в целом, а также как с их помощью можно обрезать и масштабировать изображения. Кроме того, вы изучите свойство object-position и увидите, как оно может смещать изображения.
Требования
Стандартное поведение изображений
В этом руководстве мы рассмотрим следующий код:
В результате он выдает:
Исходная ширина этого изображения – 1200 пикселей, высота – 674 пикселей. С помощью атрибута img этим параметрам были присвоены значения 600 и 337 – это половина исходных размеров с сохранением соотношения сторон.
Давайте теперь предположим, что у нас есть макет, который ожидает, что изображения будут иметь ширину в 300 пикселей и высоту в 337 пикселей:
В браузере этот код покажет следующий результат:
Полученное изображение больше не сохраняет исходное соотношение сторон и кажется визуально сжатым.
Как работает object-fit: fill
fill – это начальное значение object-fit. Оно не сохраняет исходное соотношение сторон.
Этот код выдаст в браузере следующий результат:
Поскольку это исходное значение для движков рендеринга в браузерах, внешний вид масштабированного изображения не меняется. Полученное изображение по-прежнему выглядит сжатым.
Как работает object-fit: cover
Значение cover сохраняет исходное соотношение сторон изображения, но изображение занимает все доступное пространство.
Данный код покажет в браузере такой результат:
В определенных ситуациях object-fit: cover может обрезать изображение. В этом примере некоторые части исходного изображения (слева и справа) не отображаются, потому что они не умещаются в пределах заявленной ширины.
Как работает object-fit: contain
Значение contain сохраняет исходное соотношение сторон, но при этом изображение не может выходить за пределы доступного пространства.
Этот код выдаст в браузере следующий результат:
В некоторых ситуациях object-fit: contain приводит к тому, что изображение не может заполнить все доступное пространство. Как вы видите в данном примере, над и под изображением есть пустое горизонтальное пространство, потому что заявленная доступная высота больше, чем высота масштабированного изображения.
Как работает object-fit: none
Значение none вообще никак не изменяет размер изображения.
Этот код выдаст в браузере следующий результат:
Если изображение больше доступного места, оно будет обрезано. В нашем примере некоторые части исходного изображения слева, справа, сверху и снизу не отображаются, потому что они не помещаются в границах заявленных ширины и высоты.
Как работает object-fit: scale-down
Значение scale-down будет отображать картинку либо как contain, либо как none – в зависимости от того, что именно выдаст наименьшее изображение.
Этот код выдаст в браузере следующий результат:
В этом примере изображение было уменьшено по принципу contain.
Как работают свойства object-fit и object-position
Если в результате object-fit выдает обрезанное изображение, оно по умолчанию будет центрировано. Для изменения точки фокуса можно использовать свойство object-position.
Вернемся к примеру object-fit: cover.
Теперь давайте изменим положение видимой части изображения по оси X, чтобы показать правый край изображения:
Этот код покажет следующий результат:
В этом примере фрагмент изображения с черепахой вырезан.
А теперь давайте посмотрим, что произойдет, если указать позицию за пределами доступного пространства:
В результате получится:
В этом примере изображение сдвинуто так, что мы видим только его левую часть. Кроме того, слева мы видим интервал, который составляет 20% доступного пространства.
Заключение
В этой статье мы рассмотрели доступные значения свойств object-fit и object-position.
Прежде чем использовать свойство object-fit в своем проекте, убедитесь, что ваша целевая аудитория пользуется браузерами, которые его поддерживают.