Fix piece image layout

sunfish-shogi · Jun 23, 2023 · 547518a · 547518a
1 parent 22832f6
commit 547518a
Showing 1 changed file with 12 additions and 5 deletions.
diff --git a/src/renderer/view/primitive/BoardView.vue b/src/renderer/view/primitive/BoardView.vue
@@ -41,7 +41,7 @@
         :style="square.backgroundStyle"
       />
       <div v-for="piece in layout.piece" :key="piece.id" :style="piece.style">
-        <img class="full" :src="piece.imagePath" />
+        <img class="piece-image" :src="piece.imagePath" />
       </div>
       <div v-for="label in layout.labels" :key="label.id" :style="label.style">
         {{ label.character }}
@@ -70,7 +70,7 @@
           :key="piece.id"
           :style="piece.style"
         >
-          <img class="full" :src="piece.imagePath" />
+          <img class="piece-image" :src="piece.imagePath" />
         </div>
         <div
           v-for="pointer in layout.blackHand.pointers"
@@ -96,7 +96,7 @@
           :key="piece.id"
           :style="piece.style"
         >
-          <img class="full" :src="piece.imagePath" />
+          <img class="piece-image" :src="piece.imagePath" />
         </div>
         <div
           v-for="pointer in layout.whiteHand.pointers"
@@ -111,10 +111,13 @@
         :style="layout.promotion.style"
       >
         <div class="select-button promote" @click="clickPromote($event)">
-          <img class="full" :src="layout.promotion.promoteImagePath" />
+          <img class="piece-image" :src="layout.promotion.promoteImagePath" />
         </div>
         <div class="select-button not-promote" @click="clickNotPromote($event)">
-          <img class="full" :src="layout.promotion.notPromoteImagePath" />
+          <img
+            class="piece-image"
+            :src="layout.promotion.notPromoteImagePath"
+          />
         </div>
       </div>
       <div class="turn" :style="layout.turn.style">{{ nextMoveLabel }}</div>
@@ -508,4 +511,8 @@ const whitePlayerTimeSeverity = computed(() => {
   justify-content: center;
   align-items: center;
 }
+.piece-image {
+  max-width: 100%;
+  max-height: 100%;
+}
 </style>