setup image size checkbox

partials/CellStyleEditor.vue

 <template lang="pug">
   div
-    .bg-grey-9.q-pa-md
-      .q-caption.text-grey-6.q-mb-sm Image position
-      .text-center
-        template(v-for="(position, index) in css.backgroundPositions")
-          q-btn.q-ma-xs(@click="setStyle(position)", round, size="sm", flat,
-          :class="[updatedCell && position === updatedCell.stylesheet.value ? 'bg-blue' : 'bg-grey-8']")
-          br(v-if="index === 2 || index === 5")
+    //--------------------------------------------------------------------------------------------------- image position
+    q-item.q-pa-none(style="border-bottom: 1px solid rgba(255,255,255,0.04);")
+
+      q-item-main.q-pa-md.bg-grey-9(style="border-radius: .15rem;")
+        q-tooltip.z-max.shadow-6.bg-grey-9(anchor="center left", self="center right", :offset="[8, 0]",
+        style="border: 1px solid rgba(255,255,255,0.1);") Set image position in cell
+
+        q-item-tile.q-caption.text-grey-6.q-mb-sm Image position
+
+        q-item-tile.text-center
+          template(v-for="(position, index) in css.backgroundPositions")
+            q-btn.q-ma-xs(@click="setStyle(position)", round, size="sm", flat,
+            :class="[updatedCell && position === updatedCell.stylesheet.value ? 'bg-blue' : 'bg-grey-8']")
+            br(v-if="index === 2 || index === 5")
+
+    //------------------------------------------------------------------------------------------------------- image size
+    q-item.q-pa-none(style="border-bottom: 1px solid rgba(255,255,255,0.04);")
+
+      q-item-main.bg-grey-9.q-py-sm(style="border-radius: .15rem;")
+
+        q-tooltip.z-max.shadow-6.bg-grey-9(anchor="center left", self="center right", :offset="[8, 0]",
+        style="border: 1px solid rgba(255,255,255,0.1);") Fit image to cell
+
+        q-item-tile.q-px-md
+          q-checkbox.full-width.q-py-sm(
+          dark,
+          v-model="model.backgroundSize",
+          label="Fit image to cell",
+          @input="value => handleItemChanged(value)")
+
 </template>
 
 <script>
@@ -17,7 +40,8 @@
       return {
         updatedCell: {stylesheet: {value: undefined}},
         model: {
-          backgroundPosition: undefined
+          backgroundPosition: undefined,
+          backgroundSize: false
         },
         css: {
           backgroundPositions: ['bg-top-left', 'bg-top', 'bg-top-right', 'bg-left', 'bg-center', 'bg-right', 'bg-bottom-left', 'bg-bottom', 'bg-bottom-right']