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

Способ 1. Использование отрицательных полей

Изображение необходимо поместить в родительский элемент, в нашем случае - div. Родительский элемент должен быть обтекаемым элементом (или с заданной шириной). Метод не будет работать на блочных элементах или элементах во всю ширину.

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

1. <div class="crop"><img src="image.gif" alt="" /></div>

1. .crop
2. {
3.    float: left;
4.    overflow: hidden;
5. }
6. .crop img
7. {
8.    margin: -70px -50px -160px -175px;
9. }

Способ 2. Использование абсолютного позиционирования

По этому методу задаем ширину и высоту родительского эдемента, свойство position (позиционирование) устанавливаем relative (относительным). Ширина и высота определяют размеры отображаемого поля. Для изображения внутри родительского элемента свойство позиционирования задаем absolute (абсолютным). Затем с помощью свойств top (сверху) и left (слева) задаем, какую часть изображения показывать.

1. <div class="crop"><img src="image.gif" alt="" /></p>

1. .crop
2. {
3.    float: left;
4.    overflow: hidden;
5.    position: relative;
6.    width: 270px;
7.    height: 260px;
8. }
9. .crop img
10. {
11.    position: absolute;
12.    top: -70px;
13.    left: -175px;
14. }

Способ 3. Использование свойства сlip

Этот способ самый простой, так как свойство clip определяет часть элемента, которую надо показать. Но этот метод имеет два недостатка.

Во-первых, обрезанный элемент должен позиционироваться абсолютно. Поэтому нам придется добавить дополнительный элемент, вычислить размер видимой области изображения, добавить этот размер и задать свойство float родителю.

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

1. <div class="crop"><p><img src="image.gif" alt="" /></p></div>

1. .crop
2. {
3.    float: left;
4.    position: relative;
5.    width: 150px;
6.    height: 90px;
7. }
8. .crop p
9. {
10.    margin: 0;
11.    position: absolute;
12.    top: -70px;
13.    left: -175px;
14.    clip: rect(70px 445px 330px 175px);
15. }

Результаты всех трех методов обрезания абсолютно идентичны, но наиболее простым является первый, т.к. при его использовании нет необходимости менять значения родительского элемента.

Статьи по теме:

• Градиент: CSS3 против CSS2 + картинка
• Фотомонтажим на PHP
• Скругление углов. Обзор методов
• Спрайты: меньше картинок - больше скорость
• Создаём графический информер на PHP