HTML How to show partial Image – 在HTML 上怎樣顯示部份的圖片

今天需要在網頁上做一些圖像處理的功能…
第一個難是..
怎樣可以在網頁上只顯示一個JPG/PNG/GIF的圖片..
的其中一部份…
E.G.
右上角

嘗試過在Div上設定Max-WidthMax-Height都不能成功
如果在圖片上使用Width/Height的屬性的話..
這只會改變圖片的大小的
最後終於找到解決方法了
解決方法:
我們可以使用 overflow:hidden 來解決

E.G.

</pre>
<div style="width: 200px; height: 200px; overflow: hidden;"><img src="http://i1255.photobucket.com/albums/hh631/sharechiwai/Travel%202012/Borough%20Market%20London/WP_003652.jpg" alt="" /></div>
<pre>

另一個方法是在img tag上使用css中的Clip的屬性

<img style="clip: rect(0px,200px,200px,0px);" src="http://i1255.photobucket.com/albums/hh631/sharechiwai/Travel%202012/Borough%20Market%20London/WP_003652.jpg" alt="" />
 (top/上, right/右, bottom/下, left/左)
 

cssclip的好處是..可以設定顯然的地方
E.G.

Hope you find it useful

Leave a Reply