Setting up the element that we are going to resize

We are going to make the element #yui_img resizable in all 8 directions.

Note: When you want to resize an element that requires the top and left sides to be positioned, it is best practice to make the element position: absolute. Otherwise it will be positioned relative and the outcome will not be what you expected.

#yui_img { position: absolute; top: 20px; left: 20px; } <img src="assets/yui.jpg" id="yui_img" height="166" width="250">

Creating the resize instance

Since an image cannot have child nodes appended to it, the Resize Utility will auto wrap it with an element that can. See the API docs for more info on the wrap option.

For shorthand, we are using the handles type of All, which just simply means t, r, b, l, tr, tl, br, bl. We are also using the config knobHandles, this applies a class to the Resize element and styles all of the handles into the small knobs seen above.

In this instance we have also turned on the convenience option draggable, this will allow the element to be dragged.

(function() { var Dom = YAHOO.util.Dom, Event = YAHOO.util.Event; var resize = new YAHOO.util.Resize('yui_img', { handles: 'all', knobHandles: true, height: '166px', width: '250px', proxy: true, draggable: true, animate: true, animateDuration: .75, animateEasing: YAHOO.util.Easing.backBoth }); })();

Configuration for This Example

You can load the necessary JavaScript and CSS for this example from Yahoo's servers. Click here to load the YUI Dependency Configurator with all of this example's dependencies preconfigured.