ЛУЧШИЙ САЙТ ДЛЯ РАЗРАБОТЧИКОВ
×

CSS учебник

CSS HOME CSS Introduction CSS Syntax CSS How To CSS Colors CSS Backgrounds CSS Borders CSS Margins CSS Padding CSS Height/Width CSS Box Model CSS Outline CSS Text CSS Fonts CSS Icons CSS Links CSS Lists CSS Tables CSS Display CSS Max-width CSS Position CSS Overflow CSS Float CSS Inline-block CSS Align CSS Combinators CSS Pseudo-class CSS Pseudo-element CSS Opacity CSS Navigation Bar CSS Dropdowns CSS Image Gallery CSS Image Sprites CSS Attr Selectors CSS Forms CSS Counters CSS Website Layout CSS Units CSS Specificity

CSS Advanced

CSS Rounded Corners CSS Border Images CSS Backgrounds CSS Colors CSS Gradients CSS Shadows CSS Text Effects CSS Web Fonts CSS 2D Transforms CSS 3D Transforms CSS Transitions CSS Animations CSS Tooltips CSS Style Images CSS object-fit CSS Buttons CSS Pagination CSS Multiple Columns CSS User Interface CSS Variables CSS Box Sizing CSS Flexbox CSS Media Queries CSS MQ Examples

CSS Responsive

RWD Intro RWD Viewport RWD Grid View RWD Media Queries RWD Images RWD Videos RWD Frameworks

CSS Grid

Grid Intro Grid Container Grid Item

CSS Examples

CSS Templates

CSS References

CSS Reference CSS Selectors CSS Functions CSS Reference Aural CSS Web Safe Fonts CSS Animatable CSS Units CSS PX-EM Converter CSS Colors CSS Color Values CSS Default Values CSS Browser Support


CSS The object-fit Property


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


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

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

Свойство
object-fit 31.0 16.0 36.0 7.1 19.0

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

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

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

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

Paris

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

Paris

Пример

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

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

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

Paris

Пример

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


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

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

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

Пример

Norway Paris

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

Пример

Norway Paris


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