Css object fit cover не работает

Свойства 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% . Свойство анимируется. Не наследуется.

Источник

Отзывчивые изображения: 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 для загрузки изображений меньших размеров на мобильных устройствах.

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

Источник

Почему object-fit не работает в flexbox?

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

изображения не изменяются, как видно из демо. Почему так?

2 ответов

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

ключевой термин: приспособленный к коробке установленной своими используемыми высотой и шириной

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

Итак, утилизируйте контейнер и сделайте сами изображения элементами flex.

Дополнительная Информация

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

вот три значения:

cover

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

contain

замененный контент имеет размер для поддержания его соотношения сторон в то время как установка в поле содержимого элемента.

fill

замененное содержимое имеет размер для заполнения поля содержимого элемента.

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

С contain соотношение сторон также поддерживается, но изображение масштабируется по размеру внутри коробки. Это может привести к пробелам слева и/или справа (портретная посадка), или сверху и / или снизу (ландшафтная посадка). The object-position свойство может использоваться для перемещения изображения в поле.

С fill соотношение заброшенных и изображение по размеру окна.

Совместимость С Браузерами

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

таким образом, альтернатива Michael_B это!—10—> делает изображения имеют тот же размер, что и элементы flex:

Источник

Object-fit not affecting images

I’ve been trying to use object-fit on a few images placed inside article elements, but it doesn’t seem to affect them at all.

The desired value for the object-fit property would be cover , but as of right now, none of the other values seem to work either.

When I change it’s value, they don’t shrink, don’t grow, don’t . nothing.

If you see the CodePen, there are white spaces between the two rows, and the images don’t take all the same space/height (as it would be expected with object-fit: cover ).

6 Answers 6

For object-fit to work, the image itself needs a width and height . In the OP’s CSS, the images do not have width and/or height set, thus object-fit cannot work.

The clue: width and height need NOT be the dimensions of the image itself! Think of it as if it were a div : If you want a div to fill its container, you will set

. and the browser will know that this div should completely fill its container’s space.

In case of an img , the browser performs two steps:

1. The browser creates a bounding box: By default, the box dimensions will be the exact dimensions of the image itself. But we’re free to tell the browser to size the image to 100% of its container’s width and 100% of its container’s height. Then it will create a box that completely fills the container’s space.
2. The browser fits the image pixels into this box: By default, the image will be squeezed/stretched so the image width matches the box width, and the image height matches the box height. But using object-fit , you can select how to match image and box dimensions. For example, using object-fit:cover commands to enlarge/downsize the image to completely fill the box while maintaining its aspect ratio.

Источник

Почему в flexbox не работает подгонка объектов?

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

Размер изображений не меняется, как это видно в этой демонстрации. Это почему?

4 ответа

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

Ключевой термин: приспособлен к блоку, установленному его используемой высотой и шириной

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

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

Дополнительные детали

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

Вот три значения:

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

С contain соотношение сторон также сохраняется, но изображение масштабируется, чтобы поместиться в рамке. Это может привести к появлению пробелов слева и / или справа (портретная ориентация), или вверху и / или внизу (альбомная ориентация). Свойство object-position можно использовать для смещения изображения внутри его поля.

С fill соотношение сторон отменяется, и размер изображения соответствует размеру окна.

На момент написания статьи object-fit не поддерживается Internet Explorer. Для обходного пути см .:

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

Таким образом, альтернатива Michael_B answer заключается в том, чтобы изображения имели тот же размер, что и элементы гибкости:

Для тех, кто не может просто «выбросить контейнер и сделать сами изображения гибкими элементами», просто добавьте уровни контейнера:

Если растягивается до 100% в IE11, добавьте flex-shrink: 0 в сам , как указано здесь: Flexbox в IE11: изображение растянуто без причины?

Источник