Img object fit не работает

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

Источник

Почему в 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: изображение растянуто без причины?

Источник

Отзывчивые изображения: 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 не работает с

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

Когда ширина окна до 2000px — изображения кладутся в контейнер как надо — картинка на всю ширину и высоту без искажений, однако, при ширине свыше 2000px картинка помещается только по ширине родительского блока, тем самым оставляя отступы снизу, я делаю вывод, что object-cover не работает, что не так?

1 ответ 1

Как указано в документации W3C, object-fit применим к replaced elements .

Такими элементами являются теги audio , canvas , embed , iframe , img , input , object , и video . список

Вам нужно стили задавать для img так как picture — это контейнер

Если у вас верно указаны размеры контейнера для .movie то все будет работать

Дополнено о теге picture:

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

UPD

Благодарю за ответ, однако, убрав picture ничего не поменялось. Насчет второго способа — пробую, но почему-то подгружает только в самом большом разрешении, надо поэксперементировать

Посмотрите на пример при разных разрешениях: Убирать picture не нужно, этому тегу не нужно css задавать.

Работает ли у Вас нижеприведённый код? Я поменял на 1024px+ — одна картинка, 500- — другая картина — остальные — картинка по умолчанию

Источник