Object fit contain не работает

Свойства object-fit и object-position

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

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

Замещаемыми элементами являются элементы, чьи размеры и внешний вид определяются внешним ресурсом. К ним относятся элементы , , , , и в случае когда они содержат встраиваемое содержимое, а также элемент , использующий пользовательские элементы управления.

Свойство 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	Наследует значение свойства от родительского элемента.

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

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

Источник

Знакомство с object-fit

При работе с веб-документами мы довольно часто сталкиваемся с задачей отображения изображений (или видео) разного размера в одном и том же месте. Предположим, что вы пишете приложение с динамической галереей, которая позволяет пользователю загружать свои файлы. Вы не можете гарантировать, что все будут загружать изображения с одинаковым соотношением сторон. Что же делать?

Если разрешить соотношению сторон заполнять все пространство элемента-контейнера, то в большинстве случае это будет выглядеть ужасно. А кадрировать и менять размеры динамически «на лету» может оказаться не в ваших силах. (Допустим, если вы работаете с CMS и имеете права только для редактирования содержимого страницы.)

Модуль «Изображения и замещаемое содержимое в CSS» позволяет нам использовать свойства object-fit, предназначенное для решения подобных проблем, и object-position, устанавливающее положение контента внутри элемента по горизонтали и вертикали.

Эти элементы неплохо поддерживаются современными браузерами (за исключением IE). В этой статье мы рассмотрим несколько примеров их использования.

Примечание: object — fit работает и с SVG-контентом, но того же эффекта можно достигнуть, если установить атрибут preserveAspectRatio =»» в самом SVG.

Как работают object-fit и object-position?

Вы без проблем можете применять object — fit к любому замещаемому элементу, например:

object — fit может иметь одно из 5 значений:

1. contain : Размер контента (например, изображения) будет изменен, чтобы отобразить его целиком с сохранением первоначального соотношения сторон, но при этом уместиться в размеры, заданные элементом.

2. fill : Размер контента будет увеличен, чтобы заполнить размеры, заданные элементом, даже если при этом будет нарушено первоначальное соотношение сторон.

3. cover : Сохранение соотношения сторон контента, но изменение его ширины и высоты. Таким образом, контент полностью покрывает элемент. Меньшая из двух сторон изменяется до размеров контейнера, а большая – выходит за рамки элемента и обрезается.

4. none : Полностью игнорирует высоту или ширину, заданные контейнером, и просто использует оригинальный размер контента замещаемого элемента.

5. scale — down : Размер контента задается либо как при указании none, либо как при contain , смотря что из этого даст меньший размер замещаемого элемента в итоге.

object — position действует так же, как background-position при работе с фоновыми изображениями. Например:

Значения, выраженные в процентах, тоже можно использовать, но они рассчитываются относительно избытка доступного пространства – разницы между шириной элемента и итоговой отрисованной шириной замещаемого контента. Поэтому object — position : 50% 50% (значение, используемое по умолчанию) всегда будет помещать замещаемый элемент точно в центре. Кроме того, object — position : 0% 0% всегда будет означать выравнивание по левому верхнему углу, object — position : 100% 100% *всегда* означает выравнивание по нижнему правому углу, и т.д.

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

Результат использования различных значений object-fit

Следующие примеры кода демонстрируют эффекты от использования различных значений object — fit .

Использование object-fit: contain для размещения изображений с полями (леттербоксинг):

Леттербоксингом называются те случаи, когда вам нужно сохранить соотношение сторон изображений на странице, но при этом умещать их в одном и том же месте. К примеру, вы используете CMS, которая позволяет загружать продукцию в интернет-магазин или изображения в галерею, и контент могут загружать многие авторы. Они могут загружать файлы приблизительно нужного размера, но размеры не всегда будут в точности совпадать, а вам необходимо размещать каждое изображение в пространстве определенного размера.

Изображения с измененными пропорциями обычно ужасно выглядят, поэтому вместо этого вы можете добавить к изображению поля, с помощью параметра object — fit : contain (пример использования object-fit: contain):

Кадрирование изображений с помощью object-fit:cover

Еще одним решением, позволяющим сохранить соотношение сторон, будет кадрирование каждого изображения до нужного размера, чтобы оно полностью покрывало элемент img > , при этом любые выступы будут скрыты. Для этого просто воспользуйтесь object — fit : cover (пример использования object-fit: cover):

Изменение соотношения сторон видео с помощью object-fit: fill

С другой стороны, мы также можем взять видео и насильно изменить его соотношение сторон. Возможно, в некоторых видео, присланных вашим редактором контента, задано неправильное соотношение сторон, и вы хотите исправить его на лету, одним движением руки?

Возьмите этот кадр:

Если мы вставим его на страницу, используя этот код:

То выглядеть он будет ужасно: у видео появятся поля, потому что элемент video > всегда старается сохранить оригинальное соотношение сторон исходного файла. Чтобы исправить это, мы можем использовать object — fit : fill (пример использования object-fit: fill):

Это изменит оригинальное соотношение сторон и заставит кадр полностью заполнить элемент video > , чтобы он отображался корректно.

Интересные эффекты с использованием transition

Комбинирование object — fit и object — position с CSS transition может добавить галерее изображений или видео несколько довольно интересных эффектов. Например:

Сначала отображается лишь небольшая часть изображения, а при выборе/наведении курсора на элемент он увеличивается, демонстрируя изображение целиком (пример использования object-fit: none).

Это происходит благодаря установке свойства object — fit : none у элемента img > . Мы заставляем контент полностью игнорировать заданные ранее ширину и высоту и позволяем выйти за пределы элемента. После этого мы используем overflow: hidden, чтобы обрезать всё, что не поместилось. Для плавного увеличения размера элемента img > при наведении курсора/выборе используется свойство transition .

Пример галереи

Для демонстрации чуть более практичного использования object — fit мы создали пример галереи:

16 изображений загружаются с помощью XHR и вставляются в элементы img как ObjectURL .

В свою очередь, каждому изображению присваивается обработчик onclick , чтобы по клику они отображались в полном размере, заполняя экран (главному изображению, изначально имеющему CSS-свойство display: none , присваивается класс blowup , который заставляет его отобразиться и заполнить весь экран; после этого атрибут src главного изображения получает URL того объекта, по превью которого кликнул пользователь).

Клик по полноразмерному изображению заставит картинку опять исчезнуть.

Все размеры устанавливаются в процентах, поэтому сетка сохраняет свои пропорции при любом размере экрана.

Примечание: всем превью был присвоен атрибут tabindex =»0″, что позволяет переключаться между ними клавишей Tab (чтобы добавить элемент в список перехода по клавише Tab, необходимо присвоить ему tabindex =»0″ ), а обработчик onclick , который позволяет отображать полноразмерное изображение, был продублирован обработчиком onfocus , чтобы обеспечить элементарный доступ с клавиатуры.

Самое интересное же происходит благодаря object — fit :

1. У превью установлено свойство object — fit : cover , таким образом все они будут иметь одинаковый размер и правильное соотношение сторон, а лишнее будет обрезано. Выглядит это неплохо и создает интересный эффект при изменении размеров окна.
2. Основное изображение имеет свойства object — fit : contain и object — position : center , так что оно будет отображаться полностью, с правильным соотношением сторон и с максимально возможным размером.

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

Если вам понравилась статья, поделитесь ей!

Источник

Отзывчивые изображения: CSS-приёмы, которые помогают экономить время

Если вы занимаетесь веб-разработкой, то высока вероятность того, что вам знакомы два чудовища, о которых пойдёт речь в статье, перевод которой мы сегодня публикуем. Речь идёт об изображениях и о дедлайнах. Иногда, по каким-то причинам, картинки никак не хотят помещаться в те места макетов страниц, которые для них предназначены, а вы не можете потратить несколько часов на то, чтобы с этим разобраться.

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

Подход №1: background-image

Пятница. Пять часов вечера. Вам надо срочно доделать некую страницу. Всё готово, проблема лишь в картинках, которые никак не помещаются туда, где им положено быть. Если это случилось с вами — вот одно волшебное средство, которое вас выручит:

Выглядит знакомо? Мы все это делали когда-то. Не наводил ли вас это на мысли о мошенничестве?

Использование свойств background весьма полезно, они просто делают то, что от них ожидается. Однако стоит помнить о том, что применять их следует лишь для тех изображений, которые не являются частью основного содержимого страницы, для изображений, заменяющих текст, и в некоторых особых случаях.

Подход №2: object-fit

Что если я скажу, что свойство object-fit применимо к элементам ? Оно, кстати, работает и с видео.

Вот и всё. Обратите внимание на то, что свойству object-fit можно назначить значение contain .

▍О поддержке object-fit

К несчастью, object-fit не будет работать в IE и в старых версиях Safari, однако, для таких случаев имеется полифилл.

Вот сведения о поддержке этой возможности, взятые отсюда.

Поддержка object-fit настольными браузерами

→ Вот пример использования object-fit

Подход №3: способ, которым пользуется Netflix

То, о чём мы только что говорили, может показаться интересным, но в устаревших браузерах, без полифиллов, работать это не будет. Если вам нужно что-то универсальное, возможно, то, о чём мы будем говорить сейчас, вам подойдёт. Этот метод, один из моих любимых, работает везде.

Заключается он в том, что изображение нужно поместить в родительский элемент, свойство position которого установлено в значение relative , а свойство padding задано в процентном выражении. В результате изображение займёт всю свободную область родительского элемента. Выглядит это так:

Тут вы можете подумать о том, что это слишком сложно. Однако, после того как вы поймёте смысл этого приёма, вы осознаете, что он очень прост и удобен. К тому же, этот приём широко используется, например, в Netflix.

Взгляните на имена классов

→ Вот пример реализации этого приёма

Подход №4: height

Тут для управления размерами изображения используется свойство height: auto , и, кроме того, свойство max-width . Вполне возможно, что вам этот приём уже знаком:

Такой подход применим в большинстве случаев, тогда, когда ваш макет не слишком сложен.

Подход №5: управление изображениями и производительность

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

Знаете ли вы о том, что в современных браузерах можно менять источник изображения в зависимости от ширины страницы? Именно для этого существует атрибут srcset .

Итоги

• Если ваше изображение не является частью содержимого страницы — используйте background-image .
• Если поддержка IE вас не интересует — воспользуйтесь object-fit .
• Техника с применением контейнера со специально настроенным свойством padding , используемая Netflix, работает везде.
• В большинстве случаев для решения проблемы с картинками достаточно использовать в CSS свойство height: auto ;
• Если вы стремитесь сократить время загрузки страниц, используйте атрибут srcset для загрузки изображений меньших размеров на мобильных устройствах.

Надеемся, рассмотренные здесь подходы к работе с изображениями вам пригодятся.

Источник