如何使用jQuery在图像上拖放和调整大小？

如何使用jQuery调整图片大小并保持其纵横比相同？如何使用jQuery在图像上拖放和调整大小？

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"> 
<head> 
<title>CrossSlide - A jQuery plugin to create pan and cross-fade animations</title> 
<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css" rel="stylesheet" type="text/css"/> 
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script> 
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script> 

</head> 
<body> 

<style type="text/css"> 
#resizebleImage { background: silver; } 

</style> 

<script type="text/javascript"> 

$(document).ready(function(){ 
$("#resizebleImage").resizable().parent().draggable(); 
    }); 
</script> 

<img id="resizebleImage" src="http://images.askmen.com/galleries/singer/gloria-estefan/pictures/gloria-estefan-picture-4.jpg"> 
</body> 
</html>

来源

2010-04-23 Scott Yu - Front-End UX

好吧，我想出了如何做拖放和调整大小。现在我如何限制它以保持宽高比？我使用它修复了它。。$（ “＃resizebleImage”）可调整大小的（）父（）拖动（）; – 2010-04-23 21:16:40

OH ......嘿...的aspectRatio：真实，

来源

2010-04-23 21:41:19

您可以通过使用 'alsoResize' 属性做到这一点。

draggable.resizable({alsoResize:'#image'}); 
draggable.draggable();

draggable是div元素，图像嵌入在div中。

来源

2011-02-03 07:11:31

如何使用jQuery在图像上拖放和调整大小？

回答

相关问题