HTML或CSS可以为图像提供裁剪效果吗？

Question

我不想尝试实际裁剪图像文件。图像周围有一个厚边框，我只是想以某种方式隐藏它。标记html就是这个。

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

有没有办法居中或调整此图像的大小，以便边框消失？

Answer 1

不确定。假设您只想要中心100x100。你可以使用这个CSS：

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

在这里，我使用这种技术获得了128x128头像的64x64中心：http://jsfiddle.net/5kHbQ/

Answer 2

你可以用css，inline：

来做

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

或在css中：

.imgDiv{
  width:200px;
  height:200px;
  background:url(http://site.com/image.jpg) no-repeat -20px -20px;
}

无论哪种方式，您都会删除html中的<img>节点。

使用背景的宽度，高度和最后两个值进行游戏。

Answer 3

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

基本上，您可以使用您想要的图像高度和宽度定义的div元素。

然后，你将background-image属性设置为图像的url（这里要小心，图像的url是相对于CSS的位置，所以如果你使用外部CSS请注意文件而不是内联style属性。）

最后，您可以设置background-position属性以偏移图像，使其与您定义为“框架”的div元素对齐。

Answer 4

假设您在图像上有10个像素的yucky边框。以下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; }