Разное

Фото ксс: CSS: вписываем изображение в область — Блог

12.06.2023

Картинка по размеру блока. CSS свойство object-fit

Главная > Учебник CSS >

Часто возникает необходимость растянуть картинку по размеру блока с сохранением пропорций, чтобы изображение не искажалось. При этом результат бывает нужен разный. Иногда нужно обязательно заполнить всё пространство блока. А иногда важно отобразить всю картинку. Для этого в CSS есть свойство object-fit. Оно может иметь такие значения:

object-fit: fill — картинка просто заполняет блок без сохранения пропорций (по умолчанию)

object-fit: cover — картинка полностью заполняет всё пространство блока. Края изображения могут быть обрезаны из за того, что форма блока не совпадает с формой картинки.

object-fit: contain — вся картинка отображается в блоке. Часть блока может быть не заполнена из за того, что форма блока не совпадает с формой картинки.

object-fit: none — картинка отображается в своём реальном масштабе

object-fit: scale-down — соответствует либо contain либо none. Из этих вариантов выбирает тот, который меньше.

object-fit: initial — возвращает значение по умолчанию, если ранее изображению было установлено другое значение

object-fit: inherit — значение принимается от родительского элемента

Результат использования свойства object-fit выглядит так:

fill

cover

contain

none

scale-down

Каждое значение свойства object-fit используется для своих целей:

  • cover применяется чтобы картинка заполнила весь блок и в нём не было пустых пространств. Например, это нужно когда на странице несколько картинок и они должны отображаться в одном стиле. У всех изображений одинаковая форма и размеры. Но нужно учитывать, что часть картинки может быть не видна.
  • contain полезно, если нужно обязательно показать всю картинку. Но форма блока отличается от формы изображения. Часть блока остаётся пустой. Зато картинка растягивается максимально, насколько позволяет блок, чтобы пользователь мог её рассмотреть.
  • none нужна для специфических ситуаций, когда нельзя менять реальный размер картинки, но для неё выделено конкретное пространство на странице.
  • scale-down используется для тех же целей, что contain. Но мы учитываем, что изображение может оказаться меньше блока. contain в этом случае растянет картинку по размеру блока и изображение получится размытым. А вот scale-down не будет увеличивать изображение. И получится маленькая картинка в большом блоке.

Чтобы свойство object-fit работало, изображению нужно указать размеры. Когда картинка в блоке, указываем размеры: 100%. На самом деле, картинка не обязательно должна быть внутри блока. Просто чаще всего свойство используется именно когда нужно растянуть картинку по размеру блока. Но работа object-fit зависит от размеров изображения а не от внешнего блока.

Создадим блок, добавим в неё картинку и растянем её по ширине блока:

Стиль:

+

7
8
9
10
11
12
13
14
15
16
17
18

div
  {
  width: 100px;
  height: 130px;
  border: 1px solid Red;
  }
img
  {
  width: 100%;
  height: 100%;
  object-fit: contain;
  }

HTML код:

22

<div><img src="sizeimage. jpg"></div>

По умолчанию изображение позиционируется по центру. Свойство object-position позволяет установить позиционирование изображения и сдвинуть его внутри блока. В значении указывается горизонтальное позиционирование и через пробел вертикальное позиционирование. Горизонтальное бывает: left, center, right, а вертикальное бывает: top, center, bottom. Также можно указать смещения в единицах измерения CSS. Тогда они отсчитываются от левого верхнего угла картинки.

Пример:

18

object-position: left top;

Адаптирующиеся картинки-заставки на CSS — CSS-LIVE

Перевод статьи Flexible CSS cover images с сайта nicolasgallagher.com, c разрешения автора — Николаса Галахера.

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

  • Демо: Адаптирующиеся картинки-заставки на CSS

Поддержка браузерами: Chrome, Firefox, Safari, Opera, IE 9+

Функции

Способ, который масштабирует картинки-заставки и изменяет соотношение сторон, иллюстрирован на следующей диаграмме:

Элемент картинки-заставки должен уметь:

  • отображать фиксированное соотношение сторон, до тех пор, пока их конкретные максимальные размеры превышены;
  • поддерживать различные пропорции;
  • поддерживать свойства max-height и max-width;
  • поддерживать разные фоновые картинки;
  • отобразить изображение так, чтобы оно либо полностью заполняло компонент, либо целиком помещалось в нем;
  • центрировать изображение;

Соотношение сторон

Соотношение сторон пустого, блочного элемента может управляться с помощью установки в процентное значение его свойств padding-bottom или padding-top. Данное объявление (без какого-либо явного height), преобразует высоту элемента в 50% от его ширины.

.CoverImage {
  padding-bottom: 50%;
}

Изменения значения такого padding’a изменит и соотношение сторон. Например, результатом padding-а в 25% будет пропорция 4:1, padding в 33.333% в 3:1 соответственно, и т.д.

Максимальные размеры

Проблема с использованием этого трюка/хака для пропорций состоит в том, что если у элемента объявлено max-height, оно не будет учитываться. Это можно обойти с помощью другого «хака». Вместо того, чтобы выставлять padding элементу, мы можем создать псевдоэлемент и назначить padding уже ему.

.CoverImage:before {
  content: "";
  display: block;
  padding-bottom: 50%;
}

Теперь max-height у главного элемента будет работать. Следовало бы так же обрезать и переполнение псевдоэлемента.

.CoverImage {
  display: block;
  max-height: 300px;
  max-width: 1000px;
  overflow: hidden;
}

.
 
 CoverImage:before {
  content: "";
  display: block;
  padding-bottom: 50%;
}

Этот прием для соотношения сторон используется компонентом FlexEmbed в препроцессоре SUITCSS. Этот компонент предназначен прежде всего для отзывчивых встраиваемых видео, но он достаточно гибок, чтобы быть полезным всякий раз, когда вам необходим отображаемый элемент с предопределённым соотношением сторон. Этот компонент предоставляет модификаторы для пропорций 2:1, 3:1, 16:9, и 4:3. Компонент картинок-обложек может расширить компонент FlexEmbed.

<div></div>

Фоновое изображение

Картинка-обложка добавляется в качестве фонового изображения, которое растягивается до размера, достаточного, чтобы покрыть всю область элемента. Это гарантирует, что изображение обрежется чтобы вписаться в пропорции элемента.

.CoverImage {
  ...
  background-repeat: no-repeat;
  background-size: cover;
}

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

<div></div>

Изображения могут быть полностью отцентрированы с помощью позиции фона и центрирования блока. Эта гарантирует, что изображение будет отцентрировано в элементе, и что сам элемент будет так же отцентрирован внутри своего родителя (когда он достигнет значения

max-width).

.CoverImage {
  ...
  background-position: 50%;
  background-repeat: no-repeat;
  background-size: cover;
  margin: 0 auto;
}

Финальный результат

Если вы полагались на модуль FlexEmbed, то вам потребовалось совсем немного кода. (Посмотрите демо-пример со всем кодом, включающим код от FlexEmbed)

/**
 * требуется: suitcss/встроенная гибкость
 */

.CoverImage {
  background-position: 50%;
  background-repeat: no-repeat;
  background-size: cover;
  margin: 0 auto;
  max-height: 300px;
  max-width: 1000px;
}

<div
    <
</div>

Вы можете добавить дополнительные настройки, такие как добавление фонового цвета, или возможность переключения между ключевыми словами cover и contain для background-size.

P.S. Это тоже может быть интересно:
  • CSS, перевод

100+ фото с поцелуями | Скачать бесплатные картинки на Unsplash

100+ Картинки с поцелуями | Скачать Free Images на Unsplash
  • ФотоФотографии 2.1k
  • Стопка фотографийКоллекции 10k
  • Группа людейПользователи 6

поцелуй

чувственный

любовь поцелуй 9 0011

пара

романтично

пара целуется

целуются губы

романтика

французский поцелуй

человек

любовь

человек

Логотип Unsplash

Unsplash+

В сотрудничестве с Табитой Тернер

Unsplash+

Разблокировать

in lovehuman

We-Vibe Toys

парные знакомстваКоричневые фоны 9 0011

–––– –––– –––– – ––– – – –––– –– – –– –––– – – –– ––– –– –––– – –.

Mia Harvey

Love images atlantaga

Sean Odell

Women images & imagesfemaleman

d i e g o Authentic

Kiss imagesпрямой контактцелующаяся пара

Bhargava Marripati

костюмодеждамода

Логотип Unsplash

Unsplash+

В сотрудничестве с Тимом Моссхолдером

Unsplash+

Разблокировать

derly

Lauren Rader

United StatesRomanticoklahoma city

snogsparklerHd темные обои

Danie Franco

Люди

Аллеф Винисиус0011

Бриггс Бойд

Летние изображения и картинкимужчина и женщинаФейерверки изображения и картинки

Логотип Unsplash

Unsplash+

В сотрудничестве с Кобби Мендес

Unsplash+

Разблокировать

900 10 Пляж фото и картинкиморское побережье Дэйв Гудро

близостьоднополые xдвойные волосы

Кристофер Альваренга

индонезиябалибали джунгли

Nathan Dumlao

Wedding backgroundsuggingHug images

We-Vibe Toys

Люди изображения и картинкиHd серые обоиmake out

Unsplash logo

Unsplash+

В сотрудничестве с Kobby Mendez

Unsplash+

Разблокировать

Romancerepublica dominicanacabarete

Дайнис Граверис

sensualapparellingerie

in lovehuman

Women images & imagesfemaleman

suitclothingfashion

snogsparklerHd темные обои

Люди изображения и картинкипарень и девушкамальчик

Лето изображения и картинкимужчина и женщинаФейерверки изображения и картинки 0 Свадебный фонобниманиеобнимашки изображения

чувственнаяодежданижнее белье

–––– –– –– –––– – –––– – –––– –– – –– –––– – – –– ––– –– –––– – –.

парасвиданиеКоричневые фоны

Любовь изображенияatlantaga

Поцелуй изображенияпрямой контактцелующаяся пара

пожилые людиотношенияпожилой

сшаромантикоклахома город

возлюбленнаячанортепара цели

пляжные изображения и картинкиморское побережье

индонезийабалибали джунгли

Люди изображения и картинкиHd серые обоиразглядеть

Похожие коллекции

Поцелуи

30 фото · Куратор Кэтрин Макнил

Поцелуи

14 фото · Куратор Social Bods

поцелуи

25 фото · Куратор Брайс Купер

Летние изображения и картинкимужчина и женщинаФейерверки изображения и картинки

парасвиданиеКоричневые фоны

Женщины изображения и картинкиженщинамужчина

пожилые людиотношенияпожилой

сногспарклерHd темные обои

возлюбленная чанорпара голы

неоновые обои Hdsignwords

близостьоднополые xouplehair

Люди изображения и картинкиHd серые обои оформить

–––– –––– –––– – ––– – – –––– –– – –– –––– – – –– ––– –– –––– – –.

Love imagesatlantaga

костюмодеждамода

Люди изображения и фотографиипарень и девушкамальчик

Beach imagesseacoast

Похожие коллекции

Kissing

30 фотографий · Куратор Кэтрин Макнил

Kissing

14 фото · Куратор Social Bods

поцелуи

25 фото · Куратор Брайс Купер

Свадебный фонобнимание

sensualapparellingerie

Просматривайте премиум-изображения на iStock | Скидка 20% на iStock

Unsplash logo

Сделайте что-нибудь потрясающее

81 Бесплатные CC0 Kiss — фото

Просмотрите красивые изображения Free Kiss в высоком разрешении. Эти бесплатные фотографии имеют лицензию CC0, поэтому вы можете использовать их как в личных, так и в коммерческих проектах без указания авторства.

Премиум-предложение

Получите 10 бесплатных изображений от