Changes in zoom, it doesn't use javascript sizes

src/js/plugins/zoom.js

@@ -42,7 +42,6 @@ export default class Zoom {
 
     this.preBuildZoom_();
     document.body.addEventListener('keydown', this.onKeyDown.bind(this));
-    window.addEventListener('resize', this.onWindowResize.bind(this));
   }
 
   /**
@@ -115,42 +114,6 @@ export default class Zoom {
     const slideNumber = DOM.createNode('p', '', `${elem.i+1}`);
     slideNumber.className = 'text-slide-number';
     div.appendChild(slideNumber);
-
-    this.setSizes_(div, wrap, elem);
-  }
-
-  /**
-   * Sets layers size
-   * @param {Element} div flexbox element
-   * @param {Element} wrap wrapping element
-   * @param {Element} elem slide element
-   */
-  setSizes_(div, wrap, elem) {
-    // Calculates the margins in relation to window width
-    const divCSS = window.getComputedStyle(div);
-    const marginW = DOM.parseSize(divCSS.paddingLeft)
-      + DOM.parseSize(divCSS.paddingRight);
-    const marginH = DOM.parseSize(divCSS.paddingTop)
-      + DOM.parseSize(divCSS.paddingBottom);
-
-    // Sets element size: window size - relative margins
-    const scale = divCSS.width.includes('%') ?
-      100 / DOM.parseSize(divCSS.width) :
-      window.innerWidth / DOM.parseSize(divCSS.width);
-    if (scale === 1) {
-      // If the scale is 100% means it is mobile
-      const wsW = this.ws_.el.clientWidth;
-      elem.el.style.width = `${(wsW - marginW) * 2}px`;
-      elem.el.style.height = `${(wsW - marginH) * 1.5}px`;
-      elem.el.style.minHeight = scale === 1 ? 'auto' : '';
-      // Because of flexbox, wrap height is required
-      wrap.style.height = `${(wsW - marginH) * 1.5 / 2}px`;
-    } else {
-      elem.el.style.width = `${window.innerWidth - marginW * scale}px`;
-      elem.el.style.height = `${window.innerHeight - marginH * scale}px`;
-      // Because of flexbox, wrap height is required
-      wrap.style.height = `${window.innerHeight / scale}px`;
-    }
   }
 
   /**
@@ -198,17 +161,4 @@ export default class Zoom {
     this.isZoomed_ = false;
     document.body.style.overflow = '';
   }
-
-  /**
-   * When windows resize it is necessary to recalculate layers sizes.
-   */
-  onWindowResize() {
-    if (this.isZoomed_) this.zoomOut();
-
-    this.zws_.slides.forEach(elem => {
-      const wrap = elem.el.parentElement;
-      const div = wrap.parentElement;
-      this.setSizes_(div, wrap, elem);
-    });
-  }
 }

src/scss/modules/_zoom.scss

@@ -12,10 +12,25 @@
   position: relative;
   z-index: 2;
 
+  .slide {
+    height: 100%;
+    width: 400%;
+
+    @media screen and (orientation: portrait), screen and (max-width: 768px) and (orientation: landscape) {
+      height: 200%;
+      width: 200%;
+    }
+
+    @media (max-aspect-ratio: 2 / 3) {
+      height: 200%;
+      width: 200%;
+    }
+  }
+
   > .wrap {
     @media (min-width: 1024px) {
+      padding-bottom: 12rem;
       padding-top: 12rem;
-      padding-bottom:12rem;
     }
   }
 
@@ -23,13 +38,32 @@
     align-self: auto;
     flex: 0 1 auto;
     order: 0;
+    position: relative;
     width: 25%;
 
+    @media screen and (orientation: portrait), screen and (max-width: 768px) and (orientation: landscape) {
+      width: 50%;
+    }
+
+    @media (max-aspect-ratio: 2 / 3) {
+      width: 100%;
+    }
+
     > .wrap-zoom {
+      display: inline-block;
+      height: 25vh;
       overflow: hidden;
       position: relative;
       transition: .3s;
 
+      @media screen and (orientation: portrait), screen and (max-width: 768px) and (orientation: landscape) {
+        height: 50vh;
+      }
+
+      @media (max-aspect-ratio: 2 / 3) {
+        height: 50vh;
+      }
+
       &:hover {
         transform: scale(1.02);
         z-index: 2;
@@ -61,16 +95,6 @@
       transform: scale(.5) translate(-50%, -50%);
     }
   }
-
-  #webslides-zoomed .column {
-    @media screen and (orientation: portrait), screen and (max-width: 768px) and (orientation: landscape) {
-      width: 50%;
-    }
-
-    @media (max-aspect-ratio: 2 / 3) {
-      width: 100%;
-    }
-  }
 }
 
 .text-slide-number {