refactor(ObjectPortrait): refactor component

use v-bind css values instead strict width and height props

src/components/ObjectPortrait.vue

@@ -3,10 +3,9 @@
     <source :srcset="`${folder}/${object.id}.webp`" type="image/webp" />
     <source :srcset="`${folder}/${object.id}.gif`" type="image/gif" />
     <img
+      class="object-portrait"
       :alt="object.name"
       :title="object.name"
-      :width="width"
-      :height="height"
       loading="lazy"
       @click="$emit('click', object.id)"
     />
@@ -16,31 +15,38 @@
 <script lang="ts">
 import type { Creature, CreatureInstance } from '@/models/Creature'
 import type { Hero } from '@/models/Hero'
+import type { Town } from '@/models/Town'
 import { defineComponent } from 'vue'
 
 export default defineComponent({
   name: 'ObjectPortrait',
   props: {
     object: {
-      type: Object as () => Creature | Hero | CreatureInstance,
+      type: Object as () => Creature | Hero | Town | CreatureInstance | { id: number | string; name?: string },
       required: true,
     },
     folder: {
       type: String,
-      default: '',
       required: true,
     },
+    // eslint-disable-next-line vue/no-unused-properties
     width: {
-      type: Number,
-      default: 0,
-      required: false,
+      type: [Number, String],
+      default: 'auto',
     },
+    // eslint-disable-next-line vue/no-unused-properties
     height: {
-      type: Number,
-      default: 0,
-      required: false,
+      type: [Number, String],
+      default: 'auto',
     },
   },
   emits: ['click'],
 })
 </script>
+
+<style lang="scss" scoped>
+.object-portrait {
+  width: v-bind(width);
+  height: v-bind(height);
+}
+</style>