只顯示圖像的頂部x像素？

Question

有沒有辦法只顯示圖像的頂部x像素？我只想顯示圖像的頂部200像素。

我不能通過將圖像作爲背景來做到這一點，因爲我使用圖像作爲提交按鈕來發布數據。該圖像是「圖像」類型的輸入。

Answer 1

將圖像放在div中。在div上，應用CSS樣式：

height: 200px; 
overflow: hidden; 

無需使用Javascript。

另一個解決方案（也沒有Javascript）將設置圖像作爲div上的背景圖像。這樣可以更容易地顯示圖像的不同部分，因爲您可以指定背景位置。

Answer 2

CSS屬性clip可能是你在找什麼。它允許您指定想要剪輯的圖像部分。這是一個不錯的選擇，因爲它不依賴於容器來隱藏溢出：

clip:rect(10px, 50px, 145px, 10px); 

下面是描述它的網站，並讓您演示它：http://www.quackit.com/css/properties/css_clip.cfm

Answer 3

使它的背景200px高div。你也需要給div一個寬度。這可以通過內聯的style =「heigth：200px; width：___ px;」的css文件完成。