как обрезать изображение на css

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

Вот тут готовый пример с двумя методами, лучше посмотрите сразу, так как сам найдя какую то информацию или интересный урок сначала ищу ссылку на пример а уже потом если нравится, перехожу к коду.

Главный помощник в этом у нас будут css атрибут overflow с параметром hidden, он не даст вылезти изображению за рамки и не появится прокрутка.

В первом методе мы будем пользоваться отрицательными полями атрибута margin для изображения, css код выглядит так:

1
2
.crop{overflow:hidden;}
.crop img{margin:-50px -50px -50px -50px;}

html так:

1
2
3
<div class="crop">
<img src="crop.jpg" alt="" />
</div>

Теперь объясняю, мы поместили изображение в блок с атрибутом overflow:hidden который поможет нам скрыть ненужные стороны то есть обрезать, и задали для изображения параметры с отрицательными полями, работает это очень просто, то есть для атрибута как обычно задаются значения отступа сверху справа снизу и слева по часовой стрелке, только тут мы не отступаем а наоборот отнимаем значения от предыдущего объекта, я отнял с каждой стороны по 50 пикселей, то есть как обычно этот код можно заменить на более короткий: margin:-50px либо margin:-50px -50px;
поиграйтесь со значениями и вы поймете как он работает.

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

Вот css

1
2
3
4
5
6
7
8
9
10
11
    .crop2{
    overflow:hidden;
    position:relative;
    width:350px;
    height:200px;
    }  
.crop2 img{
    position:absolute;
    top:-50px;
    left:-50px;
    }

вот html

1
2
3
<div class="crop2">
<img src="crop.jpg" alt="" />
</div>

Количество html кода для этого метода не возросло а вот css кода возросло на порядок, тут уже нужно задавать ширину и высоту, но не полного изображения а уже обрезанного по ширине справа и высоте снизу, а слева и сверху мы будем отрезать с помощью абсолютного позиционирования, top:-50px и left:-50px, вот и все. Если что то не понятно пишите в комментариях.

Еще раз пример

нашел тут, кстати там три метода, третий мне не понравился, слишком геморный, но если хотите его тоже опишу.

Комментарии: (5)

Ты дибил тупорылый – куда ты??? Выёбывайся меньше!!!

)))))дурак я тебя унесу

У вас просто обрезка со всех сторон по 50рх.
А если две картинки разные по размерам – мы при такой обрезке получим разные картинки, а как сделать css обрезку, чтобы получить одинаковые.

Норм Спасиб :)

ни чего не понял

Оставить комментарий

Это не спам.

если переменные с фида и твиттера пришли пустые