Fix SVG scale issue

2026-06-20 12:07:51 +03:00
parent 7d2cd0759e
commit 0245d93497
3 changed files with 38 additions and 9 deletions
--- a/index.html
+++ b/index.html
@ -3,7 +3,7 @@
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>Программа мамы</title>
+    <title>NVK&SNZ</title>
  </head>
  <body>
    <div id="app"></div>
--- a/src/App.vue
+++ b/src/App.vue
@ -60,6 +60,7 @@ const createResultRow = (label, value) => {
    value: steps.join(' → '),
    image: digitImages[`../${finalDigit}.svg`],
    imageAlt: `Цифра ${finalDigit}`,
+    imageClass: `digit-icon--${finalDigit}`,
  };
 };

@ -155,7 +156,9 @@ const reset = () => {
            <span class="result-value">
              <span>{{ row.value }}</span>
              <span aria-hidden="true">→</span>
-              <img class="digit-icon" :src="row.image" :alt="row.imageAlt" />
+              <span class="digit-icon-frame">
+                <img class="digit-icon" :class="row.imageClass" :src="row.image" :alt="row.imageAlt" />
+              </span>
            </span>
          </dd>
        </template>
--- a/src/styles.css
+++ b/src/styles.css
@ -132,13 +132,39 @@ h1 {
  gap: 10px;
 }

-.digit-icon {
-  width: 58px;
-  height: 58px;
-  object-fit: contain;
+.digit-icon-frame {
+  width: 1.2em;
+  height: 1.2em;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
  flex: 0 0 auto;
 }

+.digit-icon {
+  width: 100%;
+  height: 100%;
+  object-fit: contain;
+  transform: scale(var(--digit-scale, 1.06));
+  transform-origin: center;
+}
+
+.digit-icon--6 {
+  --digit-scale: 0.75;
+}
+
+.digit-icon--7 {
+  --digit-scale: 0.75;
+}
+
+.digit-icon--8 {
+  --digit-scale: 0.75;
+}
+
+.digit-icon--9 {
+  --digit-scale: 0.75;
+}
+
 .result-button {
  justify-self: center;
  width: min(525px, 100%);
@ -194,8 +220,8 @@ h1 {
    font-size: 26px;
  }

-  .digit-icon {
-    width: 48px;
-    height: 48px;
+  .digit-icon-frame {
+    width: 1.18em;
+    height: 1.18em;
  }
 }