35d039da10970deb9abb779286f19907ec86350cDav Glass<div class="intro">

35d039da10970deb9abb779286f19907ec86350cDav Glass<p>This example shows how to create a resizable element where the resize operation is constrained to a specific aspect ratio.</p>

35d039da10970deb9abb779286f19907ec86350cDav Glass</div>

35d039da10970deb9abb779286f19907ec86350cDav Glass

35d039da10970deb9abb779286f19907ec86350cDav Glass<div class="example">

35d039da10970deb9abb779286f19907ec86350cDav Glass {{>constrain-resize-source}}

35d039da10970deb9abb779286f19907ec86350cDav Glass</div>

35d039da10970deb9abb779286f19907ec86350cDav Glass<h3>Setting up the Node</h3>

35d039da10970deb9abb779286f19907ec86350cDav Glass<p>First we need to create an HTML element to make resizable.</p>

35d039da10970deb9abb779286f19907ec86350cDav Glass

35d039da10970deb9abb779286f19907ec86350cDav Glass```

35d039da10970deb9abb779286f19907ec86350cDav Glass{{>simple-resize-source-html}}

35d039da10970deb9abb779286f19907ec86350cDav Glass```

35d039da10970deb9abb779286f19907ec86350cDav Glass

35d039da10970deb9abb779286f19907ec86350cDav Glass<p>Next, we'll give that element some CSS to make it visible.</p>

35d039da10970deb9abb779286f19907ec86350cDav Glass

35d039da10970deb9abb779286f19907ec86350cDav Glass```

35d039da10970deb9abb779286f19907ec86350cDav Glass{{>simple-resize-source-css}}

35d039da10970deb9abb779286f19907ec86350cDav Glass```

35d039da10970deb9abb779286f19907ec86350cDav Glass

35d039da10970deb9abb779286f19907ec86350cDav Glass<h3>Setting up the YUI Instance</h3>

35d039da10970deb9abb779286f19907ec86350cDav Glass

35d039da10970deb9abb779286f19907ec86350cDav Glass<p>Now we need to create our YUI instance and tell it to load the `resize` module. This module is a rollup that includes the `resize-constrain` submodule; that means we have access to the `ResizeConstrained` plugin.</p>

35d039da10970deb9abb779286f19907ec86350cDav Glass

35d039da10970deb9abb779286f19907ec86350cDav Glass```

35d039da10970deb9abb779286f19907ec86350cDav GlassYUI().use('resize');

35d039da10970deb9abb779286f19907ec86350cDav Glass```

35d039da10970deb9abb779286f19907ec86350cDav Glass

35d039da10970deb9abb779286f19907ec86350cDav Glass

35d039da10970deb9abb779286f19907ec86350cDav Glass<h3>Making the Node resizable</h3>

35d039da10970deb9abb779286f19907ec86350cDav Glass<p>Now that we have a YUI instance with the `resize` module, we need to instantiate the `Resize` instance on this Node.</p>

35d039da10970deb9abb779286f19907ec86350cDav Glass

35d039da10970deb9abb779286f19907ec86350cDav Glass```

35d039da10970deb9abb779286f19907ec86350cDav Glass{{>simple-resize-source-js}}

35d039da10970deb9abb779286f19907ec86350cDav Glass```

35d039da10970deb9abb779286f19907ec86350cDav Glass

35d039da10970deb9abb779286f19907ec86350cDav Glass<h3>Adding the Constrained Plugin</h3>

35d039da10970deb9abb779286f19907ec86350cDav Glass

35d039da10970deb9abb779286f19907ec86350cDav Glass<p>Now we will plug `ResizeConstrained` into our Resize instance. This plugin will allow you to limit the resize dimensions in special ways.</p>

35d039da10970deb9abb779286f19907ec86350cDav Glass

35d039da10970deb9abb779286f19907ec86350cDav Glass```

35d039da10970deb9abb779286f19907ec86350cDav Glass{{>constrain-resize-source-js}}

35d039da10970deb9abb779286f19907ec86350cDav Glass```

35d039da10970deb9abb779286f19907ec86350cDav Glass

35d039da10970deb9abb779286f19907ec86350cDav Glass<p>In this case, we've used the constraint feature to specify minimum height and width for the element while setting `preserveRatio` to `true`, locking in the original aspect ratio for the element.</p>

35d039da10970deb9abb779286f19907ec86350cDav Glass