Блог Vaden Pro

Все о самостоятельном создании и продвижении сайтов
Вы здесь

Свойство -o-object-fit

Дата:2.11.15 в 19:20

Характеристики свойства

В каких браузерах работает?

- - 10.6+ - - - -

В каких версиях CSS используется?

CSS 1 CSS 2 CSS 2.1 CSS 3
- - - -

Для чего используется?

Свойство предназначено для отладки масштабирования элементов, у которых заданы размеры(ширина или высота). Ярким примером являются img и video. Посредством этого свойства можно изменять их пропорции, указывая необходимые значения размеров(ширины и высоты).

Как правильно задавать?

-o-object-fit:значение;

Какие могут быть значения?

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

Пример использования

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>Свойство -o-object-fit</title>
   <style>
    p img {
      -o-fit-object: cover;
      height: 300px;
      width: 200px
      background: #eee;
    }
  </style>
 </head>
 <body>
  <p><img src="images/pic.jpg"></p>
 </body>
</html>

Оценка: 
Оценок: 2 (средняя 5 из 5)
Тип CSS свойства: 
Понравилась статья? Расскажите о ней друзьям: