Обрезаем изображение с помощью CSS. Статьи. wb0.ru - Все для веб-мастера, on-line сервисы

Обрезаем изображение с помощью CSS

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

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

Способ 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. }

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

Изображение до обрезания

Изображение после обрезания

Дата публикации: 12.11.2010
wb0.ru

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

   Ваш псевдоним:
Ваш комментарий:

Новости Интернет


Поиск




Наши партнеры




Последний пересчет

тИЦ:07 Окт 15
PR:09 Дек 13

Посетители

On-Line:14
Рекорд:1794
Зафиксирован:01 Окт 13

Наши партнеры

wservices.ru - регистрация доменов, Whois-сервисы Смайлы на все случаи жизни


Календарь событий


 
Copyright © 2006-2017, wb0.ru