#

Jump to Table of Contents

# Example: 8-way Image Resize

This example shows a simple 8-way image resize and provides the required CSS elements required for the most common image-resize visual treatment.

### Setting up the Node

First we need to create an image to resize; we wrap the image in another element to provide some CSS hooks.

    <div id="demoContainer" class="yui3-resize-knob">
    	<img id="demo" src="../assets/resize/team.jpg" alt="Eduardo Lundgren, Nate Cavanaugh and the YUI Team at Yahoo">
    </div>

### Setting up the YUI Instance

Next, we need to create our YUI instance and tell it to load the `resize` module.

    YUI().use('resize');

### Making the Node Resizable

Now that we have a YUI instance with the `resize` module, we need to instantiate the `Resize` instance on this element.

    YUI().use('resize', function(Y) {
        var resize = new Y.Resize({
            //Selector of the node to resize
            node: '#demo'
        });
    });

### Adding the Constrained Plugin

Now we add the `ResizeConstrained` plugin. This plugin will allow you to limit the resize dimensions in special ways.

    YUI().use('resize', function(Y) {
        var resize = new Y.Resize({
            //Selector of the node to resize
            node: '#demo'
        });
    	resize.plug(Y.Plugin.ResizeConstrained, {
    		constrain: '#demoContainer',
    		minHeight: 50,
    		minWidth: 50
    	});
    });

### Adding CSS

Image resize operations typically have their own visual treatment and therefore require slightly different drag handles in order to be discoverable and intuitive. Here is CSS that provides a common image-resize visual treatment:

    #demo {
    	display: block; // fixes image misalignment
    	height: 121px;
    	width: 182px;
    	position: absolute;
    	top: 100px;
    	left: 100px;
    }

    #demoContainer {
    	position: relative;
    	height: 333px;
    	width: 500px;
        border: 1px solid black;
    }

    /* knob handles demo */

    .yui3-resize-knob .yui3-resize-handle-tr,
    .yui3-resize-knob .yui3-resize-handle-br,
    .yui3-resize-knob .yui3-resize-handle-tl,
    .yui3-resize-knob .yui3-resize-handle-bl,
    .yui3-resize-knob .yui3-resize-handle-b,
    .yui3-resize-knob .yui3-resize-handle-t,
    .yui3-resize-knob .yui3-resize-handle-l,
    .yui3-resize-knob .yui3-resize-handle-r {
    	border: 1px solid #808080;
    	background-color: #F2F2F2;
    	height: 6px;
    	width: 6px;
    }

    .yui3-resize-knob .yui3-resize-handle-b,
    .yui3-resize-knob .yui3-resize-handle-t {
    	left: 45%;
    }

    .yui3-resize-knob .yui3-resize-handle-l,
    .yui3-resize-knob .yui3-resize-handle-r {
    	top: 45%;
    }

    .yui3-resize-knob .yui3-resize-handle-t,
    .yui3-resize-knob .yui3-resize-handle-tr,
    .yui3-resize-knob .yui3-resize-handle-tl {
    	top: -4px;
    }

    .yui3-resize-knob .yui3-resize-handle-b,
    .yui3-resize-knob .yui3-resize-handle-br,
    .yui3-resize-knob .yui3-resize-handle-bl {
    	bottom: -4px;
    }

    .yui3-resize-knob .yui3-resize-handle-l,
    .yui3-resize-knob .yui3-resize-handle-bl,
    .yui3-resize-knob .yui3-resize-handle-tl {
    	left: -4px;
    }

    .yui3-resize-knob .yui3-resize-handle-r,
    .yui3-resize-knob .yui3-resize-handle-br,
    .yui3-resize-knob .yui3-resize-handle-tr {
    	right: -4px;
    }

    .yui3-resize-knob .yui3-resize-handle-inner {
    	background: none;
    	height: 6px;
    	width: 6px;
    }