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; 
} 

这里，我已经使用这种技术得到的128×128的头像的中心64×64：http://jsfiddle.net/5kHbQ/

Answer 2

你可以用CSS，内嵌做到这一点：

<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; 
} 

无论哪种方式，你会删除<img>节点在html中。

玩的背景的宽度，高度和最后两个值。

Answer 3

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

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

然后，您会将background-image属性设置为图像的URL（请注意，图像的URL与CSS的位置相关，因此请注意，如果使用外部CSS文件而不是一个内联style属性）。

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

Answer 4

可以说你在图像上有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; }