Object fit: object-fit ⚡️ HTML и CSS с примерами кода

Leave a Comment / Разное / By /

object-fit ⚡️ HTML и CSS с примерами кода

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

Свойство object-fit может сохранять исходные пропорции элемента или наоборот, искажать пропорции, в угоду соблюдения размеров.

Демо

Изображения, фильтры, композиция
  • image-orientation
  • image-rendering
  • image-resolution
  • object-fit
  • object-position
  • linear-gradient()
  • radial-gradient()
  • repeating-linear-gradient()
  • repeating-radial-gradient()
  • conic-gradient()
  • repeating-conic-gradient()
  • url()
  • element()
  • image()
  • cross-fade()
  • backdrop-filter
  • filter
  • background-blend-mode
  • isolation
  • mix-blend-mode
  • contain
  • contain-intrinsic-block-size
  • contain-intrinsic-height
  • contain-intrinsic-inline-size
  • contain-intrinsic-size
  • contain-intrinsic-width
  • container
  • container-name
  • container-type
  • @container
  • content-visibility

Синтаксис

object-fit: contain;
object-fit: cover;
object-fit: fill;
object-fit: none;
object-fit: scale-down;
/* Global values */
object-fit: inherit;
object-fit: initial;
object-fit: revert;
object-fit: revert-layer;
object-fit: unset;

Значения

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

Влияние разных значений на фотографии продемонстрировано на рис. 1. Был использован следующий стиль.

img {
  background: #ccc;
  overflow: hidden;
  width: 200px;
  height: 200px;
}

Рис. 1. Фотографии с разным значением object-fit

Примечание

Opera до версии 19 поддерживает свойство -o-object-fit.

Значение по-умолчанию:

object-fit: fill;

Применяется к: К <img>,

<video>, <object>, <input type="image">

Спецификации

  • CSS Images Module Level 4
  • CSS Images Module Level 3

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

Can I Use object-fit? Data on support for the object-fit feature across the major browsers from caniuse.com.

Описание и примеры

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>object-fit</title>
    <style>
      .dolphin img {
        object-fit: cover;
        height: 400px;
        width: 300px;
      }
    </style>
  </head>
  <body>
    <p>
      <img src="image/dolphin.jpg" alt="Дельфин" />
    </p>
  </body>
</html>

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

❮ Назад Вперед ❯

Свойство object-fit определяет, как должен измениться размер элемента, чтобы он поместился в блоке.

Свойство object-fit дает возможность поместить контент изображения таким образом, чтобы он соответствовал размерам, указанным в таблице стилей.

При помощи значений свойства можно увеличить, уменьшить, обрезать или растянуть контент таким образом, чтобы он соответствовал указанным размерам ширины и высоты. Свойство имеет пять значений:

  • fill
  • contain
  • cover
  • none
  • scale-down
object-fit: fill | contain | cover | scale-down | none | initial | inherit;

Пример

<!DOCTYPE html>
<html>
  <head>
    <title>Заголовок документа</title>
    <style>
      img.tree {
      width: 200px;
      height: 400px;
      object-fit: fill;
      }
    </style>
  </head>
  <body>
    <h3>Пример свойства object-fit</h3>
    <h4>Оригинальное изображение:</h4>
    <img src="/uploads/media/default/0001/01/b408569013c0bb32b2afb0f0d45e93e982347951.jpeg" alt="Tree">
    <h4>Значение fill:</h4>
    <img src="/uploads/media/default/0001/01/b408569013c0bb32b2afb0f0d45e93e982347951.
 
 jpeg" alt="Tree">
  </body>
</html>

Попробуйте сами!

Пример со значением «cover», где края изображения обрезаны, а пропорции сохранены:

Пример

<!DOCTYPE html>
<html>
  <head>
    <title>Заголовок документа</title>
    <style>
      img.tree {
      width: 200px;
      height: 400px;
      object-fit: cover;
      }
    </style>
  </head>
  <body>
    <h3>Пример свойства object-fit</h3>
    <h4>Оригинальное изображение:</h4>
    <img src="/uploads/media/default/0001/01/b408569013c0bb32b2afb0f0d45e93e982347951.jpeg" alt="Tree">
    <h4>Значение cover:</h4>
    <img src="/uploads/media/default/0001/01/b408569013c0bb32b2afb0f0d45e93e982347951.jpeg" alt="Tree">
  </body>
</html>

Попробуйте сами!

Пример со значением «contain»:

Пример

<!DOCTYPE html>
<html>
  <head>
    <title>Заголовок документа</title>
    <style>
      img. tree {
      width: 200px;
      height: 400px;
      object-fit: contain;
      }
    </style>
  </head>
  <body>
    <h3>Пример свойства object-fit</h3>
    <h4>Оригинальное изображение:</h4>
    <img src="/uploads/media/default/0001/01/b408569013c0bb32b2afb0f0d45e93e982347951.jpeg" alt="Tree">
    <h4>Значение contain:</h4>
    <img src="/uploads/media/default/0001/01/b408569013c0bb32b2afb0f0d45e93e982347951.jpeg" alt="Tree">
  </body>
</html>

Попробуйте сами!

Пример со значением «scale-down», где размер изображения уменьшен:

Пример

<!DOCTYPE html>
<html>
  <head>
    <title>Заголовок документа</title>
    <style>
      img.tree {
      width: 200px;
      height: 400px;
      object-fit: scale-down;
      }
    </style>
  </head>
  <body>
    <h3>Пример свойства object-fit</h3>
    <h4>Оригинальное изображение:</h4>
    <img src="/uploads/media/default/0001/01/b408569013c0bb32b2afb0f0d45e93e982347951. jpeg" alt="Tree">
    <h4>Значение scale-down:</h4>
    <img src="/uploads/media/default/0001/01/b408569013c0bb32b2afb0f0d45e93e982347951.jpeg" alt="Tree">
  </body>
</html>

Попробуйте сами!

CSS3 объект-подгонка/позиция объекта | Могу ли я использовать… Таблицы поддержки для HTML5, CSS3 и т. д.

Могу ли я использовать

Поиск

?

Подгонка объекта/позиция объекта CSS3

— CR

  • Глобальное использование
    98,01% + 0,15% «=» 98,16%

Метод указания того, как объект (изображение или видео) должен помещаться внутри своей коробки. Параметры подгонки объекта включают «содержать» (подгонка в соответствии с соотношением сторон), «заполнение» (растягивание объекта для заполнения) и «обложка» (переполнение поля, но сохранение соотношения), где положение объекта позволяет перемещать объект, как фон- изображение делает.

Chrome
  1. 4–31: не поддерживается
  2. 32–111: поддерживается
  3. 112: поддерживается
  4. 113–115: поддерживается
Edge Edge 2–15: не поддерживается
  • 16–18: Частичная поддержка
  • 79–111: Поддерживается
  • 112: Поддерживается
    • Safari
    1. 3.1–7: Не поддерживается
    2. 7.1–9.1: Частичная поддержка 3.1–9.1: Поддерживается 906
      3. 900 015
    3. 16.4: поддерживается
    4. 16.5 — TP: Поддерживается
    Firefox
    1. 24% — Not supported»> 2 — 35: Не поддерживается
    2. 36 — 111: Поддерживается
    3. 112: Поддерживается
    4. 903 110 5 903 Поддерживается 13 Opera
      1. 9–10.5: Нет поддерживается
      2. 10,6–12,1: поддерживается
      3. 15–18: не поддерживается
      4. 19–94: поддерживается
      5. 95: поддерживается
      IE
        5,0086
      1. 11: не поддерживается
      Chrome для Android
      1. 112: поддерживается
      Safari на iOS
      1. 3. 2–7.1: не поддерживается
      2. 8–9.3: частичная поддержка
        3. 905104 10: поддерживается 19. 16.4: Поддерживается
      3. 16.5: Поддерживается
      Samsung Internet
      1. 4 — 19.0: поддерживается
      2. 20: поддерживается
      Opera Mini
      1. все: поддерживается
        2. Opera Mobile3 128 10: не поддерживается
      2. 11 — 12.1: Поддерживается
      3. 73: Поддерживается
      Браузер UC для Android
      1. 13.4: Поддерживается
      Браузер Android:
      — Не поддерживается
    5. 64% — Supported»>1.
    6. 4.4.3: Поддерживается
    7. 112: Поддерживается
    Firefox для Android
    1. 110: Поддерживается
    Браузер QQ
    1. 13.1: Поддерживается
    Браузер Baidu

    14 : Поддерживается

    Браузер KaiOS
    1. 2.5: Поддерживается
    2. 3: Поддерживается
    Ресурсы:
    Статья Dev.Opera
    MDN (object-fit)
    1 MDN (object-fit)
    MDN
    объектно-подходящих изображений Polyfill для IE и Edge
    WebPlatform Docs

    Что такое свойство object-fit в CSS?

    Akande Olalekan Toheeb

    Grokking the Behavioral Interview

    Многим кандидатам отказывают в приеме на технические собеседования или понижают их уровень из-за плохой успеваемости на собеседованиях по поведенческому или культурному соответствию. Пройдите собеседование с помощью этого бесплатного курса, где вы будете практиковаться, уверенно отвечая на поведенческие вопросы интервью.

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

    Элементы, на которые влияет свойство object-fit , называются замененными элементами.

    В CSS замененных элементов являются внешними объектами, представление которых не соответствует модели форматирования CSS. Их представление выходит за рамки CSS.

    Заменяемые элементы в CSS: code>img , видео , iframe и встраивают теги .

    Синтаксис и значения

    Синтаксис object-fit следующий:

     свойство: значение

    Имеет свои локальные и глобальные значения.

    Локальные значения:

     вписывание объекта: заливка;
  подходит для объекта: содержит;
  объект подходит: обложка;
  соответствие объекту: нет;
  объект-подгонка: уменьшение масштаба;

    • fill : Содержимое замененного элемента изменяется, чтобы поместиться в его контейнере, даже если для этого требуется растянуть или сжать его. Это значение по умолчанию.

    • содержат : размер содержимого изменяется, чтобы соответствовать его контейнеру, но сохраняет соотношение сторон, несмотря ни на что.

    • обложка : Содержимое заполняет свое содержимое путем обрезки, чтобы соответствовать размеру, но также сохраняет соотношение сторон.

    • нет : Размер содержимого не изменяется.

    • уменьшение масштаба

      : Изображение уменьшено до самой маленькой версии нет или содержат .

    Глобальные значения:

     соответствие объекту: наследовать;
  соответствие объекту: начальный;
  объект-подгонка: вернуться;
  соответствие объекту: не установлено;

    Работа глобальных значений не меняется для всех свойств CSS.

    Пояснение

    • Строки 6–9 представляют собой представление одного из замененных элементов.

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

    Ваш адрес email не будет опубликован. Обязательные поля помечены *