html/css 中是不是有任何功能可以裁剪图像？ [复制]

Posted 2023-03-05

【中文标题】html/css 中是不是有任何功能可以裁剪图像？ [复制]

【英文标题】：Is there any feature in html/css to crop the image? [duplicate]html/css 中是否有任何功能可以裁剪图像？ [复制]

【发布时间】：2016-09-24 12:13:36

【问题描述】：

我有一张我想裁剪的图像，然后使用 html/css 在我的项目中相应地使用它。我不想使用任何照片编辑器。

【参考方案1】：

这是一个例子：

<div id="test">
<img id="image" src="LINK to Image">
</div>

对于 CSS：

#test
overflow: hidden;
height: (number)px;
width: (number)px;


#image
position: relative;
top: (number)px;
left: (number)px;

所以图像的（位置：相对）将允许您相对于 div 以顶部和左侧移动它。 div的高度和宽度将是裁剪区域。

希望对你有帮助

【讨论】：

thnx.. 它对我有用：D

【参考方案2】：

img 
    position: absolute;
    clip: rect(0px,60px,200px,0px);

或查看CSS Display an Image Resized and Cropped