如何在jQuery中傾斜圖像而不是減小寬度？

Question

我想用jQuery來玩圖像庫。

我有一個問題，我不能傾斜圖像。圖像div寬度減小，內容丟失。我想要的是圖像被歪斜或裁剪。

檢查小提琴，看看我的意思。另外請注意，這可能可以在CSS中完成，但這是更大的一部分，所以我只需要一個jQuery解決方案。

FIDDLE

JQuery的

$(document).ready(function() { 
    $('#slider li').animate({ 
     width: 150 + 'px' 
    }, 1500); 

}); 

Answer 1

我想你想的目標#slider li img而不是#slider li。你想調整圖像的大小，而不是容器（否則容器會因爲圖像重疊而裁剪）。

另一種選擇是指定一個CSS樣式，使img正比於它的容器：

#slider li img { width: 100%; height: 100%; } 

作爲證明：http://jsfiddle.net/Ug3Dk/ & http://jsfiddle.net/Ug3Dk/1/

Answer 2

你想獲得這樣的效果呢？ http://jsfiddle.net/FJYJM/6/

$(document).ready(function() { 

      $('#slider li img').animate({width: 150}, 1500); 
}); 

1. 動畫形象，而不是容器

2. 爲每個圖像設置寬度和高度值