HTML或CSS能给图像带来裁剪效果吗？

我并没有试图实际裁剪图像文件。图像周围有一个厚厚的边框，我只是想以某种方式隐藏它。标记html如下所示

<div class="imgDiv">
    <img height="200" width="200" src="http://site.com/image.jpg">
</div>

---

是否有办法将此图像居中或调整大小，使边框消失？

当然。假设您只需要中心100x100。您可以使用以下CSS：

.imgDiv {
    width: 100px;
    height: 100px;
    overflow: hidden;
}
.imgDiv > img {
    position: relative;
    left: -50px;
    top: -50px;
}

---

在这里，我使用以下技术获得了128x128头像的中心64x64:

您可以使用css，内联：

<div class="imgDiv" style="width:200px;height:200px;background:url(http://site.com/image.jpg) no-repeat -20px -20px;"></div>

无论哪种方式，您都可以删除html中的

节点

---

播放背景的宽度、高度和最后两个值。

虽然不是使用它们的主要目的，但可以使用删除边框

基本上，您将使用

div

元素，这些元素定义为图像所需的高度和宽度

然后，您可以将属性设置为图像的url（这里要小心，图像的url是相对于CSS的位置的，因此如果使用外部CSS文件而不是内联

样式
属性，请注意）

最后，将属性设置为偏移图像，使其与定义为“frame”的
div
元素对齐。
假设图像上有10个像素的恶心边框。以下CSS会将其从视图中隐藏：

.imgDiv { width:180px; height:180px; overflow:hidden; }
.imgDiv img { display:block; margin:-10px 0 0 -10px; }

另一种方法是使用位置：

.imgDiv { width:180px; height:180px; overflow:hidden; }
.imgDiv img { position:relative; top:-10px; left:-10px; }

这只会移除顶部和左侧部分。你是对的，高度和宽度应该是180px（而不是190px）。显然，当我写这篇文章时，我在心里交换了示例大小。我已经更新了我的答案，以反映正确的宽度和高度。非常感谢。我喜欢这样做。
.imgDiv { width:180px; height:180px; overflow:hidden; }
.imgDiv img { position:relative; top:-10px; left:-10px; }