limitting width with CSS

assets/css/src/newsletter_editor/contentBlocks/image.styl

@@ -13,6 +13,8 @@
 
   .mailpoet_content 
     margin: auto
+    max-width: 100%
+    min-width: 36px
     
     a:hover
       cursor: all-scroll

assets/js/src/newsletter_editor/blocks/image.js

@@ -25,8 +25,6 @@ define([
         fullWidth: true, // true | false
         width: '64px',
         height: '64px',
-        maxWidth: false,
-        minWidth: '36px',
         styles: {
           block: {
             textAlign: 'center'
@@ -51,40 +49,23 @@ define([
         resizeHandleSelector: '.mailpoet_image_resize_handle',
         onResize: function(event) {
           var corner = this.$('.mailpoet_image').offset(),
-            width    = event.pageX - corner.left,
+            width    = event.pageX - corner.left;
-            minWidth = parseInt(this.view.model.get('minWidth')),
+          this.view.model.set('width', width + 'px');
-            maxWidth = parseInt(this.view.model.get('maxWidth'));
-
-          width = Math.min(maxWidth, Math.max(minWidth, width));
-          var height = (this.view.model.get('height') / this.view.model.get('width')) * width;
-          this.view.model.set({ width: width, height: height });
         }
       },
       ShowSettingsBehavior: {
         ignoreFrom: '.mailpoet_image_resize_handle'
       }
     }),
-    onDomRefresh: function() {
-      var maxWidth = Math.min(660, this.$el.width());
-      this.model.set('maxWidth', maxWidth + 'px');      
-    },
     onRender: function() {
       this.toolsView = new Module.ImageBlockToolsView({ model: this.model });
       this.showChildView('toolsRegion', this.toolsView);
-
-      var maxWidth = parseInt(this.model.get('maxWidth')),
-        minWidth   = parseInt(this.model.get('minWidth')),
-        width      = parseInt(this.model.get('width'));
-
-      width = Math.min(maxWidth, Math.max(minWidth, width));
-      this.model.set('width', width + 'px');
-      this.$('.mailpoet_content').css('width', width + 'px');
-
       if (this.model.get('fullWidth')) {
         this.$el.addClass('mailpoet_full_image');
       } else {
         this.$el.removeClass('mailpoet_full_image');
       }
+      this.$('.mailpoet_content').css('width', this.model.get('width'));
     }
   });
 

views/newsletter/templates/blocks/image/settings.hbs

@@ -32,8 +32,8 @@
                 name="image-width-input" 
                 type="number" 
                 value="{{getNumber model.width}}" 
-                min="{{getNumber model.minWidth}}"
+                min="36"
-                max="{{getNumber model.maxWidth}}"
+                max="660"
                 step="2" 
             /> px
             <input 
@@ -41,8 +41,8 @@
                 name="image-width" 
                 type="range" 
                 value="{{getNumber model.width}}" 
-                min="{{getNumber model.minWidth}}"
+                min="36"
-                max="{{getNumber model.maxWidth}}"
+                max="660"
                 step="2" 
             />
         </div>