Fixed: Dont make svgs too wide in jcrop container

formwidgets/responsiveimage/assets/css/main.css

@@ -156,6 +156,12 @@
 .field-responsiveimage.style-file-single .upload-object .icon-container:after {width:20px;height:20px;margin-top:-10px;margin-left:-10px;background-size:20px 20px}
 .field-responsiveimage.style-file-single .upload-object.is-error .icon-container:after {font-size:20px}
 
+.responsiveimage-jcrop-body {
+    div[data-jcrop].no-jcrop img {
+        max-width: 100%;
+    }
+}
+
 .field-responsiveimage {
     .vue-dropzone {
         display: none;

formwidgets/responsiveimage/assets/src/popup.mixin.js

@@ -18,7 +18,7 @@ export default {
                 values: { crop: null }
             };
 
-            $('body').append(this.popupContent);
+            $('body').append(this.popupContent(file));
 
             return new Promise((resolve, reject) => {
                 var $popup = $(`#${this.popupId}`);
@@ -31,7 +31,7 @@ export default {
                     imageElement.src = file.dataURL;
                     $cropContainer.append(imageElement);
 
-                    if (_cls.cropOptions.types.some(type => type == file.type)) {
+                    if (_cls.useJcrop) {
                         var jcropOptions = {
                             shade: true,
                             boxWidth: $cropContainer.width(),
@@ -71,19 +71,9 @@ export default {
                     reject(null);
                 });
             });
-        }
-    },
-
-    computed: {
-        realAspectRatio() {
-            return this.cropOptions.aspectRatio
-                ? this.cropOptions.aspectRatio[0] / this.cropOptions.aspectRatio[1]
-                : null;
         },
-        popupId() {
-            return `subform-popup-${this.formid}`;
-        },
-        popupContent() {
+        popupContent(file) {
+            var decoration = this.jcropContainerDecoration(file);
             return `<div class="control-popup modal fade" id="${this.popupId}">
                 <div class="modal-dialog">
                     <div class="modal-content">
@@ -92,8 +82,8 @@ export default {
                                 <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                                 <h4 class="modal-title">Bild konfigurieren</h4>
                             </div>
-                            <div class="modal-body">
-                                <div data-jcrop></div>
+                            <div class="modal-body responsiveimage-jcrop-body">
+                                <div data-jcrop ${decoration}></div>
                                 <p style="margin-top: 2rem;">Füge dem Anhang einen Titel und eine Beschreibung hinzu.</p>
                                 <div class="form-group text-field span-full">
                                     <input type="text" name="title" value="" placeholder="Titel" class="form-control" autocomplete="off" maxlength="255">
@@ -110,7 +100,24 @@ export default {
                     </div>
                 </div>
             </div>`;
-        }
+        },
+        useJcrop(file) {
+            return this.cropOptions.types.some(type => type == file.type);
+        },
+        jcropContainerDecoration(file) {
+            return this.useJcrop(file) ? '' : 'class="no-jcrop"';
+        },
+    },
+
+    computed: {
+        realAspectRatio() {
+            return this.cropOptions.aspectRatio
+                ? this.cropOptions.aspectRatio[0] / this.cropOptions.aspectRatio[1]
+                : null;
+        },
+        popupId() {
+            return `subform-popup-${this.formid}`;
+        },
     },
 
     mounted() {