diff --git a/lib/Newsletter/Editor/StructureTransformer.php b/lib/Newsletter/Editor/StructureTransformer.php
index 06dcdf6ebf..42f12668ca 100644
--- a/lib/Newsletter/Editor/StructureTransformer.php
+++ b/lib/Newsletter/Editor/StructureTransformer.php
@@ -49,14 +49,16 @@ class StructureTransformer {
           $image = $item;
         }
 
+        $width = $image->getAttribute('width');
+        $height = $image->getAttribute('height');
         return array(
           'type' => 'image',
           'link' => $link,
           'src' => $image->getAttribute('src'),
           'alt' => $image->getAttribute('alt'),
           'fullWidth' => $image_full_width,
-          'width' => $image->getAttribute('width'),
-          'height' => $image->getAttribute('height'),
+          'width' => $width === null ? 'auto' : $width,
+          'height' => $height === null ? 'auto' : $height,
           'styles' => array(
             'block' => array(
               'textAlign' => 'center',
diff --git a/lib/Newsletter/Renderer/Blocks/Image.php b/lib/Newsletter/Renderer/Blocks/Image.php
index fe72a1a0e4..a9641ad4b8 100644
--- a/lib/Newsletter/Renderer/Blocks/Image.php
+++ b/lib/Newsletter/Renderer/Blocks/Image.php
@@ -14,11 +14,17 @@ class Image {
       $element['src'] = get_option('siteurl') . $element['src'];
     }
 
-    $element['width'] = (int)$element['width'];
-    $element['height'] = (int)$element['height'];
-    $element = self::adjustImageDimensions($element, $column_base_width);
+    $element['width'] = str_replace('px', '', $element['width']);
+    $element['height'] = str_replace('px', '', $element['height']);
+    if(is_numeric($element['width']) && is_numeric($element['height'])) {
+      $element['width'] = (int)$element['width'];
+      $element['height'] = (int)$element['height'];
+      $element = self::adjustImageDimensions($element, $column_base_width);
+    }
+
+    $max_width = is_numeric($element['width']) ? ($element['width'] . 'px') : '100%';
     $image_template = '
-      <img style="max-width:' . $element['width'] . 'px;" src="' . $element['src'] . '"
+      <img style="max-width:' . $max_width . ';" src="' . $element['src'] . '"
       width="' . $element['width'] . '" alt="' . $element['alt'] . '"/>
       ';
     if(!empty($element['link'])) {
diff --git a/lib/Newsletter/Renderer/Template.html b/lib/Newsletter/Renderer/Template.html
index 1b9cc0f231..f4fcaf4887 100644
--- a/lib/Newsletter/Renderer/Template.html
+++ b/lib/Newsletter/Renderer/Template.html
@@ -28,7 +28,6 @@
         }
         .mailpoet_image img {
             height: auto;
-            width: 100%;
             -ms-interpolation-mode: bicubic;
             border: 0;
             display: block;
diff --git a/tests/integration/Newsletter/RendererTest.php b/tests/integration/Newsletter/RendererTest.php
index 88e89f3971..8b01324fb8 100644
--- a/tests/integration/Newsletter/RendererTest.php
+++ b/tests/integration/Newsletter/RendererTest.php
@@ -334,6 +334,48 @@ class RendererTest extends \MailPoetTest {
     expect($new_image_dimensions['width'])->equals(619);
   }
 
+  function testItRendersImageWithAutoDimensions() {
+    $image = array(
+      'width' => 'auto',
+      'height' => 'auto',
+      'src' => 'https://example.com/image.jpg',
+      'link' => '',
+      'fullWidth' => false,
+      'alt' => 'some test alt text'
+    );
+    $rendered_image = Image::render($image, self::COLUMN_BASE_WIDTH);
+    expect($rendered_image)->contains('width="auto"');
+    expect($rendered_image)->contains('max-width:100%');
+  }
+
+  function testItAdjustImageDimensionsWithPx() {
+    $image = array(
+      'width' => '1000px',
+      'height' => '1000px',
+      'src' => 'https://example.com/image.jpg',
+      'link' => '',
+      'fullWidth' => false,
+      'alt' => 'some test alt text'
+    );
+    $rendered_image = Image::render($image, self::COLUMN_BASE_WIDTH);
+    expect($rendered_image)->contains('width="620"');
+    expect($rendered_image)->contains('max-width:620px');
+  }
+
+  function testItAdjustImageDimensionsWithoutPx() {
+    $image = array(
+      'width' => '1000',
+      'height' => '1000',
+      'src' => 'https://example.com/image.jpg',
+      'link' => '',
+      'fullWidth' => false,
+      'alt' => 'some test alt text'
+    );
+    $rendered_image = Image::render($image, self::COLUMN_BASE_WIDTH);
+    expect($rendered_image)->contains('width="620"');
+    expect($rendered_image)->contains('max-width:620px');
+  }
+
   function testItRendersText() {
     $newsletter = $this->newsletter['body'];
     $template = $newsletter['content']['blocks'][0]['blocks'][0]['blocks'][2];