From e6cba03ecd2477e1717a4227eb9727eea1d461eb Mon Sep 17 00:00:00 2001
From: Natalia Platova <nataliaplatova47@gmail.com>
Date: Wed, 16 Aug 2023 19:56:37 +0300
Subject: [PATCH 1/2] 5 corrected image sizes

---
 src/components/SetGridButton.vue | 27 ++++++++++++++++++++++-----
 1 file changed, 22 insertions(+), 5 deletions(-)

diff --git a/src/components/SetGridButton.vue b/src/components/SetGridButton.vue
index 629e0d8..b550348 100644
--- a/src/components/SetGridButton.vue
+++ b/src/components/SetGridButton.vue
@@ -11,6 +11,7 @@
             :class="animation ? 'canvas img_hidden' : 'canvas'"
             ref="canvasRef"
           ></canvas>
+          <div ref="clearfixRef" class="canvasClearfix"></div>
           <div
             v-if="card.cardType == 0"
             :class="animation || !this.cardHasGIF(card) ? 'img' : 'img img_hidden'"
@@ -84,18 +85,26 @@ export default class SetGridButton extends Vue.with(Props) {
 
   createStaticImage(url: string) {
     const canvas = this.$refs.canvasRef as HTMLCanvasElement;
+    const clearfixContainer = this.$refs.clearfixRef as HTMLCanvasElement;
+    const containerWidth = clearfixContainer.offsetWidth;
+    const containerHeight = clearfixContainer.offsetHeight;
+    canvas.height = containerHeight;
+    canvas.width = containerWidth;
     let img = new Image();
     img.src = url;
     img.onload = function () {
       const ratio = img.naturalWidth / img.naturalHeight;
-      const newHeight = canvas.height;
-      const newWidth = newHeight * ratio;
+      const newWidth = containerHeight * ratio;    
+      const newHeight = containerHeight;
+
       const xOffset = (canvas.width - newWidth) / 2;
+      const yOffset = (canvas.height - newHeight) / 2;
+
       const ctx = canvas.getContext("2d");
       // @ts-ignore
       ctx.clearRect(0, 0, canvas.width, canvas.height);
       // @ts-ignore
-      ctx.drawImage(img, xOffset, 0, newWidth, newHeight);
+      ctx.drawImage(img, xOffset, yOffset, newWidth, newHeight);
     };
   }
 
@@ -135,11 +144,19 @@ export default class SetGridButton extends Vue.with(Props) {
 .img_hidden {
     display: none;
   }
-.canvas {
+.canvasClearfix {
   position: absolute;
   left: 50%;
-  transform: translateX(-50%);
+  top: 50%;
   height: 100%;
+  width: 100%;
+  transform: translate(-50%, -50%);
+}
+.canvas {
+  position: absolute;
+  left: 50%;
+  top: 50%;
+  transform: translate(-50%, -50%);
 }
 .text {
   height: 100%;

From a9e71f6fcdf8d2d605b7b0f1633412d3f05bad12 Mon Sep 17 00:00:00 2001
From: Natalia Platova <nataliaplatova47@gmail.com>
Date: Mon, 21 Aug 2023 12:07:02 +0300
Subject: [PATCH 2/2] resolve #5 5 corrected sizes

---
 src/components/SetGridButton.vue | 12 +++++++-----
 1 file changed, 7 insertions(+), 5 deletions(-)

diff --git a/src/components/SetGridButton.vue b/src/components/SetGridButton.vue
index b550348..e15d9cc 100644
--- a/src/components/SetGridButton.vue
+++ b/src/components/SetGridButton.vue
@@ -94,17 +94,19 @@ export default class SetGridButton extends Vue.with(Props) {
     img.src = url;
     img.onload = function () {
       const ratio = img.naturalWidth / img.naturalHeight;
-      const newWidth = containerHeight * ratio;    
-      const newHeight = containerHeight;
+      const newWidth = containerHeight * ratio;
+      
+      const finalWidth = newWidth>containerWidth? containerWidth : newWidth;
+      const finalHeight = finalWidth / ratio;
 
-      const xOffset = (canvas.width - newWidth) / 2;
-      const yOffset = (canvas.height - newHeight) / 2;
+      const xOffset = (canvas.width - finalWidth) / 2;
+      const yOffset = (canvas.height - finalHeight) / 2;
 
       const ctx = canvas.getContext("2d");
       // @ts-ignore
       ctx.clearRect(0, 0, canvas.width, canvas.height);
       // @ts-ignore
-      ctx.drawImage(img, xOffset, yOffset, newWidth, newHeight);
+      ctx.drawImage(img, xOffset, yOffset, finalWidth, finalHeight);
     };
   }