3 простых и быстрых техники CSS для обрезки картинок

В этой статье мы расскажем вам о 3 быстрых и простых методах CSS, которые вы cможете использовать, чтобы показать только часть картинки на вашей страничке.

Все использованные здесь методы, фактически нуждаются только в паре строчек CSS кода. Однако, это не обрезание в прямом смысле этого слова (CSS пока не может сделать этого), мы просто скрываем и показываем только ту часть картинки, которую мы хотим увидеть.

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

Техника 1 — использование отрицательных полей (Negative Margins)

Посмотреть пример
По этой технике картинку необходимо поместить в родительский элемент, в нашем случае, это параграф (тэг <p>) . Родительский абзац должен быть плавающим(floating) элементом (или с заданной шириной). Эта техника не будет работать на элементах с атрибутом «в полную ширину» (full width).

Затем мы задаем отрицательные поля для всех четырех сторон: верх(top), право(right), низ(bottom) и лево(left). Отрицательные поля определяют: насколько срезано в каждом направлении наше изображение, находящееся в родителе(параграфе). Получаем только часть от первоначальной картинки — обрезок. Затем, когда мы заменяем родительское свойство overflow на hidden, мы скрываем поля, которые находятся за нашим обрезком. Цель достигнута. Вам, правда, придется повозиться со значениями, чтобы по-настоящему почувствовать, как это работает.

Итак, HTML выглядит примерно так:

И CSS:

Техника 2 — использование абсолютного позиционирования (Absolute Positioning)

Посмотреть пример

Если вам не охота использовать отрицательные поля, мы предлагаем использовать технику №2. Она включает в себя родителя (абзац), у которого определенные ширина и высота. У данного абзаца свойство позиционирование (position) задано как relative. Ширина и высота задают размеры отображаемого поля. А картинке, размещенной внутри абзаца, свойство позиционирования (position) задано как absolute. Потом мы можем с помощью свойств верх(top) и лево(left) располагать картинку, как захотим, в процессе определяя: какую часть изображения показывать, а какую — нет.

HTML идентичен коду из предыдущей техники:

и CSS:

Техника 3 — использование свойства нарезки (Clip Property)

Посмотреть пример
Эта техника должна быть самой легкой, так как свойство нарезки (clip property) определяет часть элемента, которую надо показать. Это звучит, как совершенное решение, но есть одна загвоздка: резанный (clipped) элемент должен позиционироваться абсолютно. Чтоб была возможность использовать элемент, нам придется добавить дополнительный элемент, вычислить размер видимой области изображения, добавить этот размер родителю, пустить в ход родителя... Куча работы, не так ли?

О, еще одна проблемка: размер подрезанного элемента не уменьшается до величины обрезка, а остается первоначального размера (картинка за пределами обрезка просто скрывается). Мы должны использовать абсолютное позиционирование, чтобы двигать видимую область в верхний левый угол родителя.

Однако нельзя оставить не упомянутой свойство нарезки. И так снова код...

HTML:

Вот и CSS:

Заключение

Если вы будете внимательно просматривать примеры один за другим, вы заметите, что они абсолютно идентичны. Это еще раз доказывает, что есть множество путей для достижения одного и того же в CSS.

Что бы выбрал я для этого специфического эффекта?
Я бы использовал технику под номером 1 — отрицательные поля. Это простейшая и самая быстрая из всех вместе взятых. Плюс, когда вы захотите что-нибудь изменить, вам не придется менять родительские значения: просто измените отрицательные поля, и родительский элемент сам «приспособится».

Мы надеемся, что вам понравилась статья и вы готовы добавить её в закладки.)