javascript - CSS/JavaScript 裁剪图片

Question

如何使用 css 或 javascript 定位要裁剪的图像上的特定位置，无需大脚本的简单方法，

前图:

我想查看下图中突出显示的位置:

虽然不是完全突出显示，只是试图解释它不必从最上面开始，我想选择特定的图像比例，裁剪后如何调整大小？

Answer 1

2022 年 5 月 27 日更新:新属性 object-view-box 将很快使这变得更简单:https://ishadeed.com/article/css-object-view-box/

---

一种方法是使用带有 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/