如何在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/＆amp; http://jsfiddle.net/Ug3Dk/1/

Answer 2

你想要这样的效果吗？ http://jsfiddle.net/FJYJM/6/

$(document).ready(function () {

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

1. 动画图像，但不是容器

2. 为每张图片设置宽度和高度值