Ticket #4951: jquery_resizable_aspect_and_maxwidth.html
File jquery_resizable_aspect_and_maxwidth.html, 1.2 KB (added by DEfusion, November 11, 2009 02:38PM UTC)
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
	<meta http-equiv="content-type" content="text/html;charset=UTF-8" />
	<title>Test</title>
	<link rel="stylesheet" href="http://static.jquery.com/ui/themes/base/ui.base.css" type="text/css" media="all" />
	<style type="text/css">
		body { background-color: #1a1a1a; color: #fff; }
		.ui-resizable-se {
			background-color: red;
			cursor: se-resize;
		}
	</style>
	<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" type="text/javascript"></script>
	<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/jquery-ui.min.js" type="text/javascript"></script>
	<script type="text/javascript">
		$(function() {
			$("#testImg").resizable({
				aspectRatio: true,
				maxWidth: 500
			});
			
			$("#testImg2").resizable({
				aspectRatio: true,
				maxHeight: 150
			});
		});
	</script>
</head>
<body>
	<h4>Max Width</h4>
	<img id="testImg" src="http://jqueryui.com/images/logo.gif" />
	
	<h4>Max Height</h4>
	<img id="testImg2" src="http://jqueryui.com/images/logo.gif" />
</body>
</html>

Download in other formats:

Original Format