CSS/JavaScript для обрезания изображения

Как настроить таргетинг на определенное место на изображении, которое нужно обрезать с помощью css или javascript, простым способом без больших скриптов,

Изображение раньше:

Я хочу, чтобы выделенное место на следующем изображении просматривалось:

Не точный подсвеченный, но просто попытка объяснить это не должна быть с самого верха, я хочу выбрать конкретные масштабы изображения, И как изменить размер после обрезки?

Ответ 1

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

Здесь пример подхода:

HTML

<div id='crop-the-cats'>
    <img src='http://i.stack.imgur.com/ArS4Q.jpg'>
</div>

CSS

#crop-the-cats {
    width: 100px;
    height: 80px;
    overflow:hidden;   
    position:relative;
}

#crop-the-cats img {
    position: absolute;
    top: -60px;
    left: -70px;
}

См. http://jsfiddle.net/Da9CT/

Другой подход - использовать изображение в качестве фона изображения и переместить его с помощью background-position:

HTML

<div id='crop-the-cats'></div>

CSS

#crop-the-cats {
    width: 100px;
    height: 80px;
    background-image: url(http://i.stack.imgur.com/ArS4Q.jpg);
    background-position: -50px -60px;
}

См. http://jsfiddle.net/Da9CT/2/

Ответ 2

Вы не можете обрезать изображение с помощью javascript/css, но вы можете поместить его внутри элемента с переполнением скрытым: http://jsbin.com/ebenem/1/edit

Сообщите мне, если это поможет!