Css object fit image

Как использовать свойство object-fit

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

В тех ситуациях, когда картинка не соответствует размеру бокса, но её нужно вставить, рекомендуется использовать object-fit . Он определяет, как элемент реагирует на размеры своего бокса. object-fit предназначается для замещаемых элементов — , , , .

С помощью object-fit можно обрезать встроенное изображение и определить, как оно будет сжиматься и растягиваться.

Значения свойства object-fit

Каждое изображение имеет оригинальный размер и бокс, в котором отображается. Например, картинка может иметь размеры 1920x1080px , а бокс будет 1024x768px . Изображение сожмётся до бокса, и пользователь увидит сжатые размеры, но при этом оригинальный размер картинки останется прежним. Свойство object-fit имеет несколько значений, каждое из которых влияет на отображение изображений.

Значение fill

fill — изображение заполняет всю доступную область элемента, при этом его пропорции могут быть искажены. Задача fill — растянуть картинку до размеров её бокса. Из-за этого могут получаться сплющенные картинки.

Значение contain

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

Задача contain — сохранить пропорции оригинальной картинки, бокс заполнять не обязательно.

Значение contain удобно использовать для галереи фотографий. Если требуется сменить фото, то новое изображение не всегда идеально подходит под размеры бокса. Значение contain позволит расположить в галерее новое фото, сохранив пропорции и не обрезав важные части.

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

⭐ Для всех ситуаций, когда ограничена область показа и когда изображение точно не должно изменяться, используйте object-fit: contain .

Значение cover

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

Значение none

none — изображение будет отображаться в своих естественных размерах, игнорируя размеры родительского элемента. В этом случае изображение может выходить за пределы элемента или быть меньше его размеров.

Значение scale-down

scale-down — это значение определяется автоматически и выбирает более подходящее значение между none и contain . Если размеры изображения больше размеров родительского элемента, то scale-down будет вести себя как contain , иначе — как none .

Как использовать object-fit на практике

Для применения свойства object-fit выберите нужное значение и добавьте его к соответствующему элементу в CSS. Например, чтобы изображение полностью заполнило родительский элемент без искажения пропорций, используйте следующий код:

В статьях, тоже важно соблюдать пропорции картинок. При изменении картинок важно следить, чтобы вёрстка не сломалась.

Например, если картинка изменится, как видим ниже, то контент вокруг перестроится. В этом случае ничего не нужно делать, пропорции картинки не нарушают вёрстку.

Если в разметку добавить огромную картинку, она может нарушить сетку страницы. Чтобы этого не происходило, рекомендуется добавлять изображениям max-width: 100% . Тогда максимальный размер картинки всегда будет соответствовать размеру её родителя, и она не сможет выйти за его пределы. Всегда следуйте этому правилу. Свойство object-fit — удобный инструмент, который позволяет легко управлять отображением изображений на веб-страницах. Свойство контролирует соотношение сторон и поведение изображения при изменении размеров его родительского элемента.

Материалы по теме

«Доктайп» — журнал о фронтенде. Читайте, слушайте и учитесь с нами.

Источник

object — fit

Подстраиваем картинку или видео под контейнер без деформации.

Время чтения: меньше 5 мин

Кратко

Скопировать ссылку «Кратко» Скопировано

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

По своему поведению очень похоже на свойство background — size для фоновых изображений.

Пример

Скопировать ссылку «Пример» Скопировано

Представим, что у нас есть картинка размером 500 на 150 пикселей:

   src="https://doka.guide/css/object-fit/images/landscape.jpg" alt="Картинка из примера про object-fit"> img class="image" src="images/landscape.jpg" alt="Картинка из примера про object-fit" >    Скопировать Скопировано Не удалось скопировать   

По дизайну картинка должна занимать 250 на 250 пикселей. Если мы просто зададим эти размеры, то картинка сильно деформируется.

 .parent  width: 250px; height: 250px; border: 1px solid #FFFFFF; /* Для наглядности */> .parent  width: 250px; height: 250px; border: 1px solid #FFFFFF; /* Для наглядности */ >    Скопировать Скопировано Не удалось скопировать   

Выглядит не очень. Но тут на помощь приходит свойство object — fit , которое позволит нам сохранить пропорции исходного изображения при подстройке под нужные нам размеры.

 .image  object-fit: cover;> .image  object-fit: cover; >    Скопировать Скопировано Не удалось скопировать   

Картинка не деформировалась, подстроилась под нужные размеры. Другой вопрос, что на ней теперь почти ничего не видно 😅, но это мелочи.

Как пишется

Скопировать ссылку «Как пишется» Скопировано

Свойство задаётся для самого тега , не для родителя. Пишем свойство, а в качестве значения задаём одно из ключевых слов. В отличие от background — size мы не можем задать конкретные размеры в качестве значения 🤔

• fill — значение по умолчанию, картинка полностью вписывается в указанные размеры без соблюдения собственных пропорций. Часто это приводит к ощутимым деформациям.
• contain — картинка подстроится под заданные размеры так, чтобы поместиться внутри целиком без нарушения пропорций.
• cover — картинка без нарушения пропорций заполнит всю доступную область, обрезая всё ненужное.
• none — картинка отображается без изменения пропорций или размеров.
• scale — down — браузер сравнивает размеры картинки со значением none и со значением contain и выбирает одно из этих значений, деформируя картинку соответствующим образом. Сложно объяснить, посмотрите демку 🥴

Советую поизменять размер окна браузера чтобы наглядно увидеть как картинки подстраиваются (или нет) под заданные размеры.

Как понять

Скопировать ссылку «Как понять» Скопировано

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

Подсказки

Скопировать ссылку «Подсказки» Скопировано

💡 Задавайте свойство самой картинке , не родительскому контейнеру.

💡 Работает только если картинке задан хотя бы один размер: ширина или высота. Иначе браузер не понимает в какую область нужно вписать картинку.

💡 Свойство и его значение не наследуется. Хотя я бы посмотрела на то, как вы вложите что-нибудь внутрь картинки 0_о

💡 Классно работает в сочетании со свойством object — position .

На практике

Скопировать ссылку «На практике» Скопировано

Алёна Батицкая советует

Скопировать ссылку «Алёна Батицкая советует» Скопировано

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

Источник

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

Источник