CSS обрезка картинок

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

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

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

HTML выглядит так:

<p class="crop"><a href="#" ><img src="img.jpg" alt="css template" /></a></p>

CSS:

.crop{
	float:left;
	margin:.5em 10px .5em 0;
	overflow:hidden; /* this is important */
	border:1px solid #ccc;
	}
	/* input values to crop the image: top, right, bottom, left */
.crop img{
        margin:-41px -156px -40px -30px;
	}

Использование абсолютного позиционирования (Absolute Positioning)

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

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

<p class="crop"><a href="#" ><img src="img.jpg" alt="css template" /></a></p>

CSS:

.crop{
	float:left;
	margin:.5em 10px .5em 0;
	overflow:hidden; /* this is important */
	position:relative; /* this is important too */
	border:1px solid #ccc;
	width:200px;
	height:120px;
	}
.crop img{
	position:absolute;
	top:-40px;
	left:-50px;
	}

Использование свойства нарезки (Clip Property)

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

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

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

HTML:

<p class="crop"><a href="#" ><img src="img.jpg" alt="css template" /></a></p>

CSS:

.crop{
	float:left;
	position:relative;
	width:200px;
	height:120px;
	border:1px solid #ccc;
	margin:.5em 10px .5em 0;
	}
.crop img{
	margin:0;
	position:absolute;
	top:-40px;
	left:-50px;
	clip:rect(40px 250px 160px 50px);
	}

Источник

Добавить комментарий