update scale image size

Author: emnabs

src/Plupload.php

@@ -296,17 +296,20 @@ protected function setWrapperStyle() {
         }
         $width = 480;
         $height = 300;
-        if (isset($this->options['resize']) && !empty($resize = $this->options['resize'])) {
-            $width = !isset($resize['width']) ?: $resize['width'];
-            $height = !isset($resize['height']) ?: $resize['height'];
-        }
-        if (isset($this->wrapperOptions['width'])) {
-            $width = (int) $this->wrapperOptions['width'];
+        if (!empty($this->resize)) {
+            $_w = ArrayHelper::getValue($this->resize, 'width');
+            $_h = ArrayHelper::getValue($this->resize, 'height');
+            if ($_w) {
+                $width = $_w;
+            }
+            if ($_h) {
+                $height = $_h;
+            }
         }
-        if (isset($this->wrapperOptions['height'])) {
-            $height = (int) $this->wrapperOptions['height'];
+        if ($width) {
+            $scale = $height / $width * 100;
+            Html::addCssStyle($this->htmlOptions, "--scalebox-ratio: {$scale}%;");
         }
-        $this->htmlOptions['style'] = "width: {$width}px; height: {$height}px;";
     }
 
     /**

src/assets/css/plupload.custom.css

@@ -1,6 +1,9 @@
 /*Plupload*/
+:root {
+    --scalebox-ratio: 61.8%;
+}
 
-.plupload_wrapper{
+.plupload_wrapper {
     position: relative;
 }
 .plupload_preview,
@@ -164,7 +167,14 @@
 .plupload_wrapper.plupload_one{
     border: 1px dashed #ccc;
 }
+.plupload_wrapper.plupload_one:after{
+    padding-top: var(--scalebox-ratio);
+    content: "";
+    width: 100%;
+    display: block;
+}
 .plupload_one .plupload_container{
+    position: absolute;
     width: 100%;
     height: 100%;
 }