jquery - 如何在 jquery 中倾斜图像而不是减小宽度？

Question

我正在尝试使用 jquery 来处理图片库。

我有一个问题，我无法倾斜图像。图像 div 宽度减小，内容丢失。我想要的是扭曲或裁剪的图像。

检查小提琴以了解我的意思。另请注意，这可能可以在 CSS 中完成，但是这是更大的一部分，所以我只需要一个 jQuery 解决方案。

小提琴

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. 为每个图像设置宽度和高度值