denisnazarov/app.css

## app.css
.sized-container{
  position: relative;
}
.element-resize{
  position: absolute;
  bottom: 0px;
  right: 0px;
  width: 20px;
  height: 20px;
  background-color: black;
  cursor: pointer;
}

## app.js
App = Ember.Application.create({});

App.SizedContainerComponent = Ember.Component.extend({
  classNames: ['sized-container'],
  attributeBindings: ['style'],
  width: null, //set in template
  height: null, //set in template
  style: function(){
    var width = this.get('width'),
        height = this.get('height');
    return "width:"+width+"px;height:"+height+"px;";
  }.property('width', 'height')
});

App.ResizeElementComponent = Ember.Component.extend({
  isResizing: false,
  classNames: ['element-resize'],
  aspectRatio: function(){
    return this.get('width') / this.get('height');
  }.property('width', 'height'),
  mouseDownHandler: function(e){
    var self = this;
    if (e.target === this.$()[0]){
      e.preventDefault();
      Ember.run(function(){
        self.setProperties({
          isResizing: true,
          resizeX: e.pageX,
          resizeY: e.pageY
        });
      });
    }
  },
  mouseUpHandler: function(e){
    var self = this;
    Ember.run(function(){
      self.set('isResizing', false);
    });
  },
  mouseMoveHandler: function(e){
    var self = this;
    if (e.target === this.$()[0]){
      e.preventDefault();
    }
    if (this.get('isResizing')){
      var resizeX = this.get('resizeX'),
          resizeY = this.get('resizeY'),
          offsetX = resizeX - e.pageX,
          offsetY = resizeY - e.pageY,
          width = this.get('width'),
          height = this.get('height');

      var newWidth, newHeight;

      if (offsetX){
        newWidth = width - offsetX;
        newHeight = newWidth / this.get('aspectRatio');
      }else{
        newHeight = height - offsetY;
        newWidth = newHeight * this.get('aspectRatio');
      }
      Ember.run(function(){
        self.setProperties({
          width: newWidth,
          height: newHeight,
          resizeX: e.pageX,
          resizeY: e.pageY
        });
      });

    }
  },

  didInsertElement: function(){
    this._boundMouseDownHandler = this.mouseDownHandler.bind(this);
    this._boundMouseMoveHandler = this.mouseMoveHandler.bind(this);
    this._boundMouseUpHandler = this.mouseUpHandler.bind(this);

    $(document).on('mousedown', this._boundMouseDownHandler);
    $(document).on('mousemove', this._boundMouseMoveHandler);
    $(document).on('mouseup', this._boundMouseUpHandler);
  },
  willDestroyElement: function(){
    $(document).off('mousedown', this._boundMouseDownHandler);
    $(document).off('mousemove', this._boundMouseMoveHandler);
    $(document).off('mouseup', this._boundMouseUpHandler);
  }
});

## index.html
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>JS Bin</title>
  <script src="http://code.jquery.com/jquery-2.0.2.js"></script>
  <script src="http://builds.emberjs.com/handlebars-1.0.0.js"></script>
  <script src="http://builds.emberjs.com/ember-latest.js"></script>
</head>
<body>
  <script type="text/x-handlebars" data-template-name="application">
    {{outlet}}
  </script>
  <script type="text/x-handlebars" data-template-name="index">
    <h2>Ember Resizable Image:</h2>
    {{#sized-container width=198 height=263}}
    <img src="http://emberjs.com/images/builds/canary.png" width="100%" height="100%">
    {{resize-element width=view.width height=view.height}}
    {{/sized-container}}

  </script>
</body>
</html>
	.sized-container{
	position: relative;
	}
	.element-resize{
	position: absolute;
	bottom: 0px;
	right: 0px;
	width: 20px;
	height: 20px;
	background-color: black;
	cursor: pointer;
	}
	App = Ember.Application.create({});

	App.SizedContainerComponent = Ember.Component.extend({
	classNames: ['sized-container'],
	attributeBindings: ['style'],
	width: null, //set in template
	height: null, //set in template
	style: function(){
	var width = this.get('width'),
	height = this.get('height');
	return "width:"+width+"px;height:"+height+"px;";
	}.property('width', 'height')
	});

	App.ResizeElementComponent = Ember.Component.extend({
	isResizing: false,
	classNames: ['element-resize'],
	aspectRatio: function(){
	return this.get('width') / this.get('height');
	}.property('width', 'height'),
	mouseDownHandler: function(e){
	var self = this;
	if (e.target === this.$()[0]){
	e.preventDefault();
	Ember.run(function(){
	self.setProperties({
	isResizing: true,
	resizeX: e.pageX,
	resizeY: e.pageY
	});
	});
	}
	},
	mouseUpHandler: function(e){
	var self = this;
	Ember.run(function(){
	self.set('isResizing', false);
	});
	},
	mouseMoveHandler: function(e){
	var self = this;
	if (e.target === this.$()[0]){
	e.preventDefault();
	}
	if (this.get('isResizing')){
	var resizeX = this.get('resizeX'),
	resizeY = this.get('resizeY'),
	offsetX = resizeX - e.pageX,
	offsetY = resizeY - e.pageY,
	width = this.get('width'),
	height = this.get('height');

	var newWidth, newHeight;

	if (offsetX){
	newWidth = width - offsetX;
	newHeight = newWidth / this.get('aspectRatio');
	}else{
	newHeight = height - offsetY;
	newWidth = newHeight * this.get('aspectRatio');
	}
	Ember.run(function(){
	self.setProperties({
	width: newWidth,
	height: newHeight,
	resizeX: e.pageX,
	resizeY: e.pageY
	});
	});

	}
	},

	didInsertElement: function(){
	this._boundMouseDownHandler = this.mouseDownHandler.bind(this);
	this._boundMouseMoveHandler = this.mouseMoveHandler.bind(this);
	this._boundMouseUpHandler = this.mouseUpHandler.bind(this);

	$(document).on('mousedown', this._boundMouseDownHandler);
	$(document).on('mousemove', this._boundMouseMoveHandler);
	$(document).on('mouseup', this._boundMouseUpHandler);
	},
	willDestroyElement: function(){
	$(document).off('mousedown', this._boundMouseDownHandler);
	$(document).off('mousemove', this._boundMouseMoveHandler);
	$(document).off('mouseup', this._boundMouseUpHandler);
	}
	});
	<!DOCTYPE html>
	<html>
	<head>
	<meta charset=utf-8 />
	<title>JS Bin</title>
	<script src="http://code.jquery.com/jquery-2.0.2.js"></script>
	<script src="http://builds.emberjs.com/handlebars-1.0.0.js"></script>
	<script src="http://builds.emberjs.com/ember-latest.js"></script>
	</head>
	<body>
	<script type="text/x-handlebars" data-template-name="application">
	{{outlet}}
	</script>
	<script type="text/x-handlebars" data-template-name="index">
	<h2>Ember Resizable Image:</h2>
	{{#sized-container width=198 height=263}}
	<img src="http://emberjs.com/images/builds/canary.png" width="100%" height="100%">
	{{resize-element width=view.width height=view.height}}
	{{/sized-container}}

	</script>
	</body>
	</html>