用于调整图像大小的 jQuery UI 滑块答案

【问题标题】：jQuery UI slider to resize image用于调整图像大小的 jQuery UI 滑块
【发布时间】：2014-02-10 07:35:43
【问题描述】：

我想做一个 jQuery UI 滑块来调整我的图像大小。但是图像大小永远不会相同，所以我想根据比例调整大小。这是我到目前为止所做的：http://jsfiddle.net/Au3kk/

我试过了，但它在活动中不起作用：

 width :  ($(this).css('width')) + (ui.value + "%");

我是 Javascript 新手，希望你不会对我太苛刻。非常感谢。

【问题讨论】：

【解决方案1】：

如何存储原始宽度：

var orginalWidth = $("#image").width();

然后使用：

$("#image").width(orginalWidth * (1 + ui.value/100));

【讨论】：

非常感谢您的回答，这就是我要找的。我只是不明白为什么 width() 也会调整高度。无论如何它有效！谢谢
@casusbelli - 不客气。我注意到关于高度调整的问题。这是你想要还是不想要的东西？
好吧，您的代码可以按我的意愿运行。我想知道为什么方法 width() 也会改变我的图像的 height() 值。希望你明白我的意思。
@casusbelli - 我明白了，我想我现在知道答案了。由于您没有在 <img> 元素上指定“height”属性，因此其值默认为“auto”。这意味着当宽度改变时它将保留图像的纵横比。这是一个jsfiddle，它设置了“高度”，所以它不是“自动”。
感谢您的解释！

【解决方案2】：

你需要修改这一行，从

$("#image").css({ width : ($(this).css('width')) + (ui.value + "%"); });

到

 $('#image').css('width',ui.value+'%');

如果您删除命令的最后一部分 ( +'%' )，图像将以像素为单位调整大小。请注意，百分比增加的值必须大于 0（其中 0 表示不可见），但它可以超过 100%。在您的示例中，您已将最小值设置为 -50，最大值设置为 50。

同样使用命令 $(this).css ，您尝试读取触发事件的元素的 css（在本例中为滑块）而不是实际的图像 css

【讨论】：