在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 */ 
}