Advanced Search

jQuery Crop and Constrain to square dimensions

/ Published in: jQuery
Save to your folder(s)

Expand | Embed | Plain Text

Copy this code and paste it in your HTML 
  1. (function($){
  2.  $.fn.extend({
  3.  	cropToSquare : function(options) {
  4. 		var defaults = {
  5. 			size: 100
  6. 		};	
  7. 	  var options = $.extend(defaults, options);	  
  8. 	  return this.each(function() {
  9. 				var constrainTo = options.size;
  10. 				var width = $(this).width();
  11. 				var height = $(this).height();
  12.  
  13. 				if(height>width){
  14. 					var ratio = height/width;
  15. 					$(this).width(constrainTo).height(constrainTo*ratio);
  16. 					var marg = ($(this).height() - constrainTo) /2;
  17. 					$(this).css({marginTop:-marg});
  18. 				}else{
  19. 					var ratio = width/height;
  20. 					$(this).height(constrainTo).width(constrainTo*ratio);
  21. 					var marg = ($(this).width() - constrainTo) /2;
  22. 					$(this).css({marginLeft:-marg});					
  23. 				}
  24. 				var imgWrap=$('<div class="imgWrap" />').css({width:constrainTo,height:constrainTo,overflow:'hidden'});	;
  25. 				$(this).wrap(imgWrap);
  26. 	  });  
  27. 	}
  28.  });
  29. })(jQuery);
  30.  
  31. $(function(){
  32. 	$('img').cropToSquare();
  33. });

Report this snippet


Comments

RSS Icon Subscribe to comments

You need to login to post a comment.