Update _res/_custom.css

_res/_custom.css

@@ -228,7 +228,7 @@ span.has-info+div {
     & #switch_width_height_inner {
         width: 100px;
         height: 100px;
-        transition: transform 0.2s ease-in-out, width 0.3s ease-in-out, height 0.38s ease-in-out 0.1s;
+        transition: transform 0.2s ease-in-out, background-image 0.3 ease-in-out, width 0.3s ease-in-out, height 0.38s ease-in-out 0.1s;
         border-radius: 0.4rem;
         border: 4px solid var(--text-color-by-luminance);
         /*background: transparent;*/
@@ -238,26 +238,32 @@ span.has-info+div {
     [data-aspect-ratio="16-9"] {
         width: 90px !important;
         height: 51px !important;
+        background-image: url("file=_res/assets/ratio_preview_bgs/90x51px_16zu9.png");
     }
     [data-aspect-ratio="9-16"] {
         width: 51px !important;
         height: 90px !important;
+        background-image: url("file=_res/assets/ratio_preview_bgs/51x90px_9zu16.png");
     }
     [data-aspect-ratio="4-3"] {
         width: 90px !important;
         height: 60px !important;
+        background-image: url("file=_res/assets/ratio_preview_bgs/60x90px_4zu3.png");
     }
     [data-aspect-ratio="3-4"] {
         width: 60px !important;
         height: 90px !important;
+        background-image: url("file=_res/assets/ratio_preview_bgs/90x60px_3zu4.png");
     }
     [data-aspect-ratio="3-2"] {
         width: 90px !important;
         height: 67px !important;
+        background-image: url("file=_res/assets/ratio_preview_bgs/90x67px_3zu2.png");
     }
     [data-aspect-ratio="2-3"] {
         width: 67px !important;
         height: 90px !important;
+        background-image: url("file=_res/assets/ratio_preview_bgs/67x90px_2zu3.png");
     }
     [data-aspect-ratio="1-1"] {
         width: 70px !important;