fix image positioning

makamekm · Mar 4, 2020 · cc45936 · cc45936
1 parent 9d8754f
commit cc45936
Showing 1 changed file with 7 additions and 9 deletions.
diff --git a/style.plugins.js b/style.plugins.js
@@ -279,23 +279,21 @@ async function setFrameStyles(state, shared) {
     if (images[node.id] != null && !Object.keys(props).includes('gbg')) {
       const url = `url(${await loadImageFromImagesToDisk(node, shared)})`;
 
-      if (bounds && Math.abs(bounds.angle) > 0) {
-        const left = (parent.absoluteBoundingBox.width - bounds.width) / 2 / bounds.width;
-        const top = (parent.absoluteBoundingBox.height - bounds.height) / 2 / bounds.height;
+      if (bounds && Math.abs(bounds.angle)) {
+        middleStyle.display = 'flex';
+        middleStyle.justifyContent = 'center';
+        middleStyle.alignItems = 'center';
 
         const afterId = genClassName();
         classNames.push(afterId);
         additionalStyles.push(`
           .${afterId}::after {
-            position: absolute;
             pointer-events: none;
-            left: -${left * 100}%;
-            right: -${left * 100}%;
-            top: -${top * 100}%;
-            bottom: -${top * 100}%;
+            width: ${node.absoluteBoundingBox.width / bounds.width * 100}%;
+            height: ${node.absoluteBoundingBox.height / bounds.height * 100}%;
             content: '';
             background: ${url} center center no-repeat;
-            background-size: contain;
+            background-size: cover;
             transform: rotate(${bounds.angle}deg);
             transform-origin: 50% 50%;
           }