Товаров: 0 (0р.)

Css object fit: object-fit — CSS | MDN

Содержание

object-fit — CSS | MDN

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

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

Значения

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

Правильный синтаксис

HTML Контент

<div>
  <h3>object-fit: fill</h3>
  <img src="https://mdn.mozillademos.org/files/6457/mdn_logo_only_color.png" alt="MDN Logo"/>

  <img src="https://mdn.mozillademos.org/files/6457/mdn_logo_only_color.png" alt="MDN Logo"/>

  <h3>object-fit: contain</h3>
  <img src="https://mdn.mozillademos.org/files/6457/mdn_logo_only_color.png" alt="MDN Logo"/>

  <img src="https://mdn.mozillademos.org/files/6457/mdn_logo_only_color.png" alt="MDN Logo"/>

  <h3>object-fit: cover</h3>
  <img src="https://mdn.mozillademos.org/files/6457/mdn_logo_only_color.png" alt="MDN Logo"/>

  <img src="https://mdn.mozillademos.org/files/6457/mdn_logo_only_color.png" alt="MDN Logo"/>

  <h3>object-fit: none</h3>
  <img src="https://mdn.mozillademos.org/files/6457/mdn_logo_only_color.png" alt="MDN Logo"/>

  <img src="https://mdn.mozillademos.org/files/6457/mdn_logo_only_color.png" alt="MDN Logo"/>

  <h3>object-fit: scale-down</h3>
  <img src="https://mdn.mozillademos.org/files/6457/mdn_logo_only_color.png" alt="MDN Logo"/>

  <img src="https://mdn.mozillademos.org/files/6457/mdn_logo_only_color.png" alt="MDN Logo"/>

</div>

CSS Контент

h3 {
  font-family: Courier New, monospace;
  font-size: 1em;
  margin: 1em 0 0.3em;
}

div {
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  align-items: flex-start;
  height: 940px;
}

img {
  width: 150px;
  height: 100px;
  border: 1px solid #000;
}

.narrow {
  width: 100px;
  height: 150px;
  margin-top: 10px;
}

.fill {
  object-fit: fill;
}

.contain {
  object-fit: contain;
}

.cover {
  object-fit: cover;
}

.none {
  object-fit: none;
}

.scale-down {
  object-fit: scale-down;
}

Результат

BCD tables only load in the browser

Свойства object-fit и object-position. Масштабируем пропорционально.

1. Свойство object-fit

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

Замещаемыми элементами являются элементы, чьи размеры и внешний вид определяются внешним ресурсом. К ним относятся элементы <img> <input type="image">,

<embed>, <iframe>, <video>, <canvas> и <object> в случае когда они содержат встраиваемое содержимое, а также элемент <audio>, использующий пользовательские элементы управления.

Свойство object-fit масштабирует, обрезает или растягивает содержимое замещаемых элементов. Свойство хорошо поддерживается в последних версиях Chrome, Firefox и Safari. Для браузера IE8-11 можно использовать полифил (библиотеку, добавляющую в старые браузеры поддержку свойств, работающих в современных браузерах).

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

IE: не поддерживает
Firefox: 36.0
Chrome: 31.0
Safari: 7.1 только object-fit, 10.0 полная поддержка

Opera: 19.0
iOS Safari: 8.0 только object-fit, 10.1 полная поддержка
Opera Mini: -o-
Android: 4.4.4
Chrome for Android: 54.0

object-fit
fillЗначение по умолчанию. Содержимое замещаемого элемента полностью заполняет область контейнера тега, используя его высоту и ширину.
containСодержимое элемента масштабируется, выравниваясь по центру с сохранением пропорций таким образом, чтобы полностью поместиться внутри контейнера.
coverСодержимое элемента обрезается, выравниваясь по центру с сохранением пропорций таким образом, чтобы полностью заполнить область контейнера.
scale-downСодержимое элемента выбирает из двух значений none и contain то значение, которое даёт меньшие размеры.
noneЗамещаемое содержимое не изменяет свои собственные размеры, чтобы поместиться и заполнить область контейнера.
initialУстанавливает это свойство в значение по умолчанию.
inheritНаследует значение свойства от родительского элемента.

See the Pen BQGdYy by Elena (@html5book) on CodePen.

2. Свойство object-position

Свойство object-position используется в сочетании с object-fit и задаёт положение содержимого замещаемого элемента внутри контейнера относительно координатных осей X и Y. Значение по умолчанию 50% 50%. Свойство анимируется. Не наследуется.

object-position
Значения:
left top,
left center,
left bottom,
right top,
right center,
right bottom,
center top,
center center,
center bottom		Позиционирование по горизонтали и вертикали задаётся с помощью пары ключевых слов. Если задано одно ключевое слово, второе примет значение center.
px / em/ %Указывается два значения, первое определяет расстояние между левой стороной изображения и левым краем элемента-контейнера (по горизонтали), второе значение указывает расстояние между верхней стороной изображения и верхним краем элемента-контейнера (по вертикали). Также можно использовать отрицательные значения для обрезки части контента.
Процентное значение рассчитывается относительно содержимого и контейнера, в котором оно расположено. Одновременно можно комбинировать значения в
px, em и %.
initialУстанавливает значение свойства в значение по умолчанию.
inheritНаследует значение свойства от родительского элемента.

See the Pen vyQWme by Elena (@html5book) on CodePen.

object-fit | CSS | WebReference

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

Краткая информация

Значение по умолчаниюfill
НаследуетсяНет
ПрименяетсяК <img>, <video>, <object>, <input type=»image»>
АнимируетсяНет

Синтаксис 

object-fit: fill | contain | cover | none

Обозначения

ОписаниеПример
<тип>Указывает тип значения.<размер>
A && BЗначения должны выводиться в указанном порядке.<размер> && <цвет>
A | BУказывает, что надо выбрать только одно значение из предложенных (A или B).normal | small-caps
A || BКаждое значение может использоваться самостоятельно или совместно с другими в произвольном порядке.width || count
[ ]Группирует значения.[ crop || cross ]
*Повторять ноль или больше раз.[,<время>]*
+Повторять один или больше раз.<число>+
?Указанный тип, слово или группа не является обязательным.inset?
{A, B}Повторять не менее A, но не более B раз.<радиус>{1,4}
#Повторять один или больше раз через запятую.<время>#

Значения

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

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

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

Исходные изображения

fill

contain

cover

none

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

Песочница

Пример

<!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>

Объектная модель

Объект.style.objectFit

Примечание

Edge поддерживает object-fit только для <img>.

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

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

Каждая спецификация проходит несколько стадий одобрения.

  • Recommendation (Рекомендация) — спецификация одобрена W3C и рекомендована как стандарт.
  • Candidate Recommendation (Возможная рекомендация) — группа, отвечающая за стандарт, удовлетворена, как он соответствует своим целям, но требуется помощь сообщества разработчиков по реализации стандарта.
  • Proposed Recommendation (Предлагаемая рекомендация) — на этом этапе документ представлен на рассмотрение Консультативного совета W3C для окончательного утверждения.
  • Working Draft (Рабочий проект) — более зрелая версия черновика после обсуждения и внесения поправок для рассмотрения сообществом.
  • Editor’s draft (Редакторский черновик) — черновая версия стандарта после внесения правок редакторами проекта.
  • Draft (Черновик спецификации) — первая черновая версия стандарта.

Браузеры

В таблице браузеров применяются следующие обозначения.

  •  — свойство полностью поддерживается браузером со всеми допустимыми значениями;
  •  — свойство браузером не воспринимается и игнорируется;
  •  — при работе возможно появление различных ошибок, либо свойство поддерживается лишь частично, например, не все допустимые значения действуют или свойство применяется не ко всем элементам, которые указаны в спецификации.

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

Автор и редакторы

Автор: Влад Мержевич

Последнее изменение: 02.03.2020

Редакторы: Влад Мержевич

object-fit CSS уроки для начинающих академия


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

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

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

Свойство
object-fit31.016.036.07.119.0

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

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

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

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

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

Пример

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

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

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

Пример

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

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

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

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

Пример


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

Пример


Все значения свойства объекта CSS-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;}


-o-object-fit | htmlbook.ru

Internet ExplorerChromeOperaSafariFirefoxAndroidiOS
10.6+15.0+

Краткая информация

Значение по умолчаниюfill
НаследуетсяНет
ПрименяетсяК <img>, <video>, <object>, <input type=»image»>
Процентная записьНеприменима

Версии CSS

Описание

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

Синтаксис

-o-object-fit: fill | contain | cover | none

Значения

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

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

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

Исходные изображения

fill

contain

cover

none

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

Пример

HTML5CSS2.1CSS3IECrOpSaFx

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

Краткий обзор «object-fit» и «object-position» — CSS-LIVE

Перевод статьи A Quick Overview of `object-fit` and `object-position с сайта css-tricks.com для css-live.ru. Автор — Роберт Рендли.

Последнее время object-fit и object-position — мои любимые CSS-свойства. С ними разработчики могут управлять содержимым внутри img или video, подобно манипулированию содержимым background с помощью background-position и background-size.

Для начала, подробнее про

object-fit

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

Вот пример:

Это изображение 400х260px. Если добавить к нему…

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

… то в итоге получим неуклюжее искажение, поскольку изображение сплющивается, чтобы уместиться в эти рамки:

Содержание в нашем img займёт всё доступное пространство в своём новом боксе, созданном при изменении его высоты и ширины, «ломая» тем самым его исходные пропорции.

Чтобы и сохранить пропорции изображения и заполнить всю доступную область, воспользуемся object-fit:

.cover {
  object-fit: cover;
}

Слева исходное изображение, а справа — изображение обрезанное по бокам, которое теперь сохраняет наши пропорции! Может в таком масштабе это и не выглядит впечатляющим, но как только мы столкнёмся с разработкой более реалистичных интерфейсов, вот тогда-то object-fit и проявит себя во всей красе.

Возьмём другой пример:

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

img {
  height: 100vh;
  width: 50vw;
}

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

Попробуйте снова изменить размер экрана. Странности с пропорциями исчезли, так ведь? Это также весьма полезно для изображений с различными размерами, поскольку они фактически будут обрезаны по границам бокса.

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

Перейдём к следующему из моих любимых свойств:

object-position.

Воспользуемся уже знакомым изображением и этими стилями:

img {  
  background: yellow;
  height: 180px;
  object-fit: none;
}

Здесь стоит отметить пару вещей: для правильной работы object-position нужно объявить размеры для изображения, а чтобы изображение не заполняло весь бокс (как это происходит по умолчанию), а его можно было сдвинуть, нужно установить ему object-fit: none. Это может показаться странным, но всё дело в том, что по умолчанию для изображения устанавливается object-fit: fill, даже если не объявлять его специально.

Что касается поведения по умолчанию, без значения object-position центрирует все объекты по горизонтали и вертикали:

img {
  background: yellow;
  height: 180px;
  object-fit: none;
  object-position: 50% 50%; /* Даже если это не объявлять, изображение всё равно отцентрируется. */
}

Первое значение смещает изображение влево или вправо, а второе — вверх или вниз. Здесь можно поэкспериментировать с этими значениями:

Мы можем даже «протолкнуть» изображение внутрь его области контента, так что можно будет увидеть background-color, который мы задали раньше

Но насколько это полезно? Хороший вопрос! Вот в недавнем проекте мне потребовалось сдвинуть к центру конкретный участок изображения, и тем самым привлечь внимание читателя. Загрузка нового изображения не требуется, поэтому в этом случае не понадобится элемент <picture>, всё, что мы хотели — немного сдвинуть изображение.

Помимо смещения фокуса на нужную часть изображения, не очень представляю, для чего еще это может быть полезно на практике. Но я повозился с object-position, чтобы продемонстрировать, как можно скрыть части изображения, а затем по клику показывать его по кусочкам, как в этом демо:

Я не эспериментировал, как и для чего можно использовать это для элементов <video>. Может быть, видео на весь экран, заполняющее его без черных полос по краям? Чтобы полностью раскрыть потенциал этих свойств, изучить предстоит ещё очень много.

Что с поддержкой?

В целом, неплохо!

object-fit поддерживается везде, кроме IE/Edge. А object-position поддерживается везде, кроме Safari и IE/Edge.

P.S. Это тоже может быть интересно:

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>
Попробуйте сами!

Значения¶

object-fit — CSS: каскадные таблицы стилей

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

Вы можете изменить выравнивание объекта содержимого замененного элемента внутри поля элемента, используя свойство object-position .

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


соответствие объекта: наследование;
объектное соответствие: начальное;
соответствие объекта: вернуться;
соответствие объекта: не задано;

Свойство подгонки под объект задается как одно ключевое слово, выбранное из списка значений ниже.

Значения

содержат
Замененное содержимое масштабируется для сохранения соотношения сторон при размещении в поле содержимого элемента. Весь объект заполняет коробку, сохраняя при этом его соотношение сторон, поэтому объект будет «в почтовом ящике», если его соотношение сторон не совпадает с соотношением сторон коробки.
крышка
Размер замененного содержимого изменяется таким образом, чтобы сохранить его соотношение сторон при заполнении всего поля содержимого элемента.Если соотношение сторон объекта не соответствует соотношению сторон его блока, то объект будет обрезан по размеру.
заполнить
Размер замененного содержимого соответствует размеру поля содержимого элемента. Весь объект полностью заполнит коробку. Если соотношение сторон объекта не соответствует соотношению сторон его блока, то объект будет растянут по размеру.
нет
Размер замененного содержимого не изменяется.
в уменьшенном масштабе
Размер содержимого изменяется так, как если бы не было указано или содержит , в зависимости от того, что приведет к уменьшению размера конкретного объекта.
 заполнить | содержать | крышка | нет | scale-down

Настройка объекта для изображения

HTML 
  <раздел>
   
 размер объекта: заливка 
 
  Логотип MDN

  Логотип MDN

   
 соответствие объекта: содержать 
 
  Логотип MDN

  Логотип MDN

   
 размер объекта: крышка 
 
   Логотип MDN 

  Логотип MDN

   
 размер объекта: нет 
 
  Логотип MDN

  Логотип MDN

   
 размер объекта: уменьшение 
 
  Логотип MDN

  Логотип MDN
CSS 
  h3 {
  семейство шрифтов: Courier New, моноширинный;
  размер шрифта: 1em;
  маржа: 1em 0 0.3em;
}

img {
  ширина: 150 пикселей;
  высота: 100 пикселей;
  граница: 1px solid # 000;
  маржа: 10px 0;
}

.узкий {
  ширина: 100 пикселей;
  высота: 150 пикселей;
}

.наполнять {
  соответствие объекта: заполнить;
}

.содержать {
  соответствие объекта: содержать;
}

.обложка {
  объект подходит: крышка;
}

.никто {
  соответствие объекта: нет;
}

.уменьшать {
  подгонка объекта: уменьшение масштаба;
}
Результат

таблицы BCD загружаются только в браузере

объект-позиция — CSS: каскадные таблицы стилей

Свойство CSS object-position задает выравнивание содержимого выбранного замененного элемента внутри поля элемента.Области поля, которые не покрыты объектом заменяемого элемента, будут отображать фон элемента.

Вы можете настроить, как внутренний размер объекта заменяемого элемента (то есть его естественный размер) корректируется так, чтобы он соответствовал рамке элемента, используя свойство object-fit .

 
позиция объекта: центр вверху;
позиция объекта: 100px 50px;


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

Значения

<позиция>
От одного до четырех значений, определяющих 2D-положение элемента.Могут использоваться относительные или абсолютные смещения.

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

Начальное значение 50% 50%
Применимо к замененным элементам
Унаследовано да
Вычисленное значение, как указано
Тип анимации повторяемый список простого списка длины, процента или вычисления

Позиционирование содержимого изображения

HTML

Здесь мы видим HTML, который включает два элемента , каждый из которых отображает логотип MDN.

  Логотип MDN
Логотип MDN
CSS

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

  img {
  ширина: 300 пикселей;
  высота: 250 пикселей;
  граница: сплошной черный 1px;
  цвет фона: серебристый;
  маржа справа: 1em;
  соответствие объекта: нет;
}

# object-position-1 {
  позиция объекта: 10 пикселей;
}

# object-position-2 {
  позиция объекта: 100% 10%;
}

Первое изображение расположено так, что его левый край вставлен на расстоянии 10 пикселей от левого края рамки элемента.Второе изображение располагается так, чтобы его правый край был заподлицо с правым краем рамки элемента, и на 10% ниже высоты рамки элемента.

Результат

таблицы BCD загружаются только в браузере

Замененные элементы — CSS: каскадные таблицы стилей

В CSS заменяемый элемент — это элемент, представление которого выходит за рамки CSS; это внешние объекты, представление которых не зависит от модели форматирования CSS.

Проще говоря, это элементы, на содержимое которых не влияют стили текущего документа. С помощью CSS можно изменить положение заменяемого элемента, но не содержимое самого замененного элемента. Некоторые замененные элементы, такие как элементы