在HTML5中裁剪图像

Question

如何在html中裁剪图像？我在server-pc上有一个图像，是否可以在我的网页上只显示一个裁剪部分而不明确裁剪并创建一个新图像？

Answer 1

真的有两种选择。

1）是使用图像修改脚本来重现剪裁的图像，如TimThumb（需要PHP）。这将动态裁剪图像。从你的问题来看，你是不是不想要一个新的图像，或者你是否不想手动创建一个。

2）是做一些漂亮的HTML/CSS。基本上你会为图像创建一个容器，隐藏溢出，并在其中定位/调整图像的大小。这将是这样的......

HTML：

<div class="crop"> 
    <img src="image.jpg" alt=""> 
</div> 

CSS：

.crop { 
    display: block; 
    height: 100px; 
    position: relative; 
    overflow: hidden; 
    width: 100px; 
} 
.crop img { 
    left: -20px; /* alter this to move left or right */ 
    position: absolute; 
    top: -20px; /* alter this to move up or down */ 
}