Javascript如何同時調整圖像大小並剪切圖像？

Question

我有一個圖像與原始大小：374x144。它在一個文件中是3張圖片。所以我定義一個div標籤來獲得一個圖像：

<div style="background-image:url('http://pics.kapihospital.de/ga_cars.5.jpg');position:absolute;height:48px;width:374;background-position: 0px -96px;"></div> 

現在我想調整圖像/ div標籤。但是，當我改變高度和屬性我得到一個改變的剪輯部分，而不是一個調整大小的圖像。

可以同時剪切並提升圖像嗎？新的尺寸應該是179x23左右

Answer 1

你應該使用一個實際的圖像標籤做大小調整和某種包裝來做剪裁（我使用了div）。

HTML

<div> 
    <img src="http://pics.kapihospital.de/ga_cars.5.jpg" width="179" height="69"> 
</div>​​​​ 

CSS

DIV { 
    width: 179px; 
    height: 23px; 
    overflow: hidden; 
} 

IMG { 
    position: relative; 
    top: -23px; 
} 

您可以使用圖像position: relative和使用負top財產在div遊移它。