Need the big size image to be resizable

Need the big size image to be resizable

My coding is :


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" " http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns=" http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
<head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8" />
    <meta http-equiv="content-script-type" content="text/javascript" />
    <meta http-equiv="content-style-type" content="text/css" />

    <title>DRAG & DROP</title>
    <meta name="description" content="DRAG & DROP" />
    
    <script src=" http://www.google.com/jsapi" type="text/javascript"></script>
<script type="text/javascript">
   google.load("jquery", "1.4.2");
google.load("jqueryui", "1.7.2");
</script>

<link rel="stylesheet" type="text/css" href="stylesheets/style.css" media="all" />

<script type="text/javascript">
    $(document).ready(function(){
        //Counter
        counter = 0;
        //Make element draggable
        $(".drag").draggable({
            helper:'clone',
            containment: 'frame',

            //When first dragged
            stop:function(ev, ui) {
            var pos=$(ui.helper).offset();
            objName = "#clonediv"+counter
            $(objName).css({"left":pos.left,"top":pos.top});
            $(objName).removeClass("drag");


                //When an existiung object is dragged
                $(objName).draggable({
                containment: 'parent',
                    stop:function(ev, ui) {
                    var pos=$(ui.helper).offset();
                    console.log($(this).attr("id"));
console.log(pos.left)
                        console.log(pos.top)
                    }
                });
            }
        });
        //Make element droppable
        $("#frame").droppable({
drop: function(ev, ui) {
if (ui.helper.attr('id').search(/drag[0-9]/) != -1){
counter++;
var element=$(ui.draggable).clone();
element.addClass("tempclass");
$(this).append(element);
$(".tempclass").attr("id","clonediv"+counter);
$("#clonediv"+counter).removeClass("tempclass");

//Get the dynamically item id
draggedNumber = ui.helper.attr('id').search(/drag([0-9])/)
itemDragged = "dragged" + RegExp.$1
console.log(itemDragged)

$("#clonediv"+counter).addClass(itemDragged);
}
        }
        });
    });
$(function() {
            $( ".dragged6" ).resizable();
         });

 

</script>



</head>

<body>

<div id="wrapper">
<div id="options">
<div id="drag6" class="drag"></div> <!-- end of drag6 -->
</div><!-- end of options -->
<div id="frame" class = "ui-widget-content">
<div id="settingsWidget" class="SarahComponent">

    </div>           
</div><!-- end of frame -->
</div><!-- end of wrapper -->
</body>
</html>


Style : 

body {
 text-align: center;
 background:#eaeaea;
}
#wrapper {
 text-align: left;
 width: 720px;
 margin-left: auto;
 margin-right: auto;
}

#options{
width: 100px;
height:100px;
border:1px solid black;
float:left;
}

#frame{
width:600px;
height:600px;
background-repeat: repeat-y;
    background-position: 0 0;
    border:1px solid black;
    float:right;
}




#drag6 {
margin-left:10px;
margin-top:10px;
background-image: url("../images/2.jpg");
width:80px;
height:80px;
}

.ui-draggable-helperMoving {
border: 1px dotted #000;
padding: 6px;
background: #fff;
font-size: 1.2em;
width:100px;
height:100px;
}

.ui-draggable-helperStoped {
border: 1px solid #000;
width:5px;
height:5px;
}



/* classes for dragged stuff */


.dragged6 {
position:absolute; 
background-image: url("../images/1.jpg");
width:400px;
height:400px;
}


#element{
border:1px solid red
}