Управление размерами изображений в CSS
Сохранение соотношения сторон предотвращает искажение изображений из-за растяжения или сжатия. Работая с CSS, вы, вероятно, рано или поздно попадете в ситуацию, когда вам будет нужно сохранить исходное соотношение сторон изображения. Очень часто для решения этой проблемы используется CSS-свойство background-image. Есть и более современный подход – это свойство object-fit.
В этом руководстве мы поговорим о таких значениях object-fit, как fill, cover, contain, none и scale-down. Мы обсудим, как они влияют на изображение в целом, а также как с их помощью можно обрезать и масштабировать изображения. Кроме того, вы изучите свойство object-position и увидите, как оно может смещать изображения.
Требования
- Чтобы выполнить этот мануал, вам нужно знать, что такое свойства и значения CSS.
- Вы должны уметь использовать декларации CSS, встроенные в свойство style.
- Редактор кода.
- Современный веб-браузер, поддерживающий object-fit and object-position.
Стандартное поведение изображений
В этом руководстве мы рассмотрим следующий код:
В результате он выдает:
Исходная ширина этого изображения – 1200 пикселей, высота – 674 пикселей. С помощью атрибута img этим параметрам были присвоены значения 600 и 337 – это половина исходных размеров с сохранением соотношения сторон.
Давайте теперь предположим, что у нас есть макет, который ожидает, что изображения будут иметь ширину в 300 пикселей и высоту в 337 пикселей:
В браузере этот код покажет следующий результат:
Полученное изображение больше не сохраняет исходное соотношение сторон и кажется визуально сжатым.
Как работает object-fit: fill
fill – это начальное значение object-fit. Оно не сохраняет исходное соотношение сторон.
Этот код выдаст в браузере следующий результат:
Поскольку это исходное значение для движков рендеринга в браузерах, внешний вид масштабированного изображения не меняется. Полученное изображение по-прежнему выглядит сжатым.
Как работает object-fit: cover
Значение cover сохраняет исходное соотношение сторон изображения, но изображение занимает все доступное пространство.
Данный код покажет в браузере такой результат:
В определенных ситуациях object-fit: cover может обрезать изображение. В этом примере некоторые части исходного изображения (слева и справа) не отображаются, потому что они не умещаются в пределах заявленной ширины.
Как работает object-fit: contain
Значение contain сохраняет исходное соотношение сторон, но при этом изображение не может выходить за пределы доступного пространства.
Этот код выдаст в браузере следующий результат:
В некоторых ситуациях object-fit: contain приводит к тому, что изображение не может заполнить все доступное пространство. Как вы видите в данном примере, над и под изображением есть пустое горизонтальное пространство, потому что заявленная доступная высота больше, чем высота масштабированного изображения.
Как работает object-fit: none
Значение none вообще никак не изменяет размер изображения.
Этот код выдаст в браузере следующий результат:
Если изображение больше доступного места, оно будет обрезано. В нашем примере некоторые части исходного изображения слева, справа, сверху и снизу не отображаются, потому что они не помещаются в границах заявленных ширины и высоты.
Как работает object-fit: scale-down
Значение scale-down будет отображать картинку либо как contain, либо как none – в зависимости от того, что именно выдаст наименьшее изображение.
Этот код выдаст в браузере следующий результат:
В этом примере изображение было уменьшено по принципу contain.
Как работают свойства object-fit и object-position
Если в результате object-fit выдает обрезанное изображение, оно по умолчанию будет центрировано. Для изменения точки фокуса можно использовать свойство object-position.
Вернемся к примеру object-fit: cover.
Теперь давайте изменим положение видимой части изображения по оси X, чтобы показать правый край изображения:
Этот код покажет следующий результат:
В этом примере фрагмент изображения с черепахой вырезан.
А теперь давайте посмотрим, что произойдет, если указать позицию за пределами доступного пространства:
В результате получится:
В этом примере изображение сдвинуто так, что мы видим только его левую часть. Кроме того, слева мы видим интервал, который составляет 20% доступного пространства.
Заключение
В этой статье мы рассмотрели доступные значения свойств object-fit и object-position.
Прежде чем использовать свойство object-fit в своем проекте, убедитесь, что ваша целевая аудитория пользуется браузерами, которые его поддерживают.
Самый простой способ кропнуть изображение на CSS
Как только не извращались верстальщики, чтобы кропнуть изображение средствами CSS. С появлением свойств object-fit и object-position, задача сильно упростилась.
Во-первых, что такое кроп и для чего он нужен?
Кроп (crop) в переводе с английского значит «обрезать». В этом и есть основная задача кропа — вписывать без искажений изображения в блоки с иными размерами и пропорциями. Чаще всего используется в галереях, плитке, списках и т.п.
Кропировать изображение можно по-разному. Обычно вырезают середину по меньшей стороне изображения. Потому что именно там чаще всего находится смысловая нагрузка изображения.
Чтобы вырезать середину изображения и задать ему размеры 100×100 воспользуемся CSS-свойством object-fit и object-position
Получится примерно так:
Остановимся подробнее на свойствах.
Object-Fit
Свойство Object-Fit определяет, как содержимое элемента должно заполнять контейнер относительно его высоты и ширины.
Object-Fit может принимать следующие значения:
- Fill — дефолтное значение, изображение заполняет полностью контейнер по всей высоте и ширине.
- Contain — изображение масштабируется, выравниваясь по центру с сохранением пропорций таким образом, чтобы полностью поместиться внутри контейнера.
- Cover — изображение обрезается, выравниваясь по центру с сохранением пропорций таким образом, чтобы полностью заполнить область контейнера.
- None — изображение не изменяет свои размеры, чтобы поместиться и заполнить область контейнера.
- Scale-Down — изображение выбирает из двух значений none и contain то значение, которое даёт меньшие размеры.
Object-Position
Свойство object-position используется в сочетании с object-fit и задаёт положение элемента внутри контейнера относительно координатных осей X и Y.
Значение по умолчанию 50% 50%.
Для позиционирования можно использовать относительные и абсолютные единицы, в том числе их комбинации.
В заключение
Напомню, в Вордпресс для кропа существует прекрасная функция add_image_size(), которая регистрирует новый размер изображений для последующего использования в интерфейсе. Если на сайте повсеместно используется какой-то конкретный размер изображений, целесообразнее его зарегистрировать (или скорректировать имеющийся) и использовать на уровне бэкенда.
Делаю сайты на Вордпресс с 2008 года, в том числе уникальные инструменты для решения сложных бизнес‑задач.
Как с помощью CSS сделать обрезку картинки до определенного размера?
Этот класс растянет картинку на всю ширину блока, и автоматически построит ее высоту.
ну и похожий класс описать для варианта 100% hegit и width:auto;
1. Вы используете бутстрап, там этот код уже есть (написанный в этом примере), удалите его из своих стилей, в Ашем случае достаточно просто к картинке добавить img-responsive.
2. Если надо ограничить по высоте, то можно сделать например так: