feats

src/App.vue

@@ -24,8 +24,9 @@ onMounted(() => {
 <template>
   <Loader :loading="loading" :percent="percent" />
   <ScrollDown />
-  <Image v-for="(res, inx) in resources" :key="res.image" :resource="res"></Image>
+  <Image v-for="res in resources" :key="res.image" :resource="res"></Image>
 </template>
 
-<style scoped>
+<style lang="less" scoped>
+
 </style>

src/components/Mask.vue

@@ -22,6 +22,11 @@
   img.src = indexImage;
   img.onload = function() {
     const canv = cvsRef.value;
+
+    const { clientWidth, clientHeight } = document.body;
+    canv.style.width = `${clientWidth}px`;
+    canv.style.height = `${img.naturalHeight * clientWidth / img.naturalWidth}px`;
+
     canv.width = img.naturalWidth;
     canv.height = img.naturalHeight;
   }