@adstage/web-sdk 2.2.0 → 2.2.1

package/dist/index.cjs.js

@@ -394,6 +394,7 @@ class BaseAdRenderer {
             display: 'block',
             'max-width': '100%',
             height: 'auto',
+            'object-position': 'center', // 🎯 이미지 항상 중앙 정렬
         };
         // 사용자가 컨테이너 크기를 지정한 경우에만 크기 제한
         const parsedWidth = this.parseSizeValue(slot?.width);
@@ -402,6 +403,7 @@ class BaseAdRenderer {
             styles.width = '100%';
             styles.height = '100%';
             styles['object-fit'] = 'cover';
+            styles['object-position'] = 'center'; // 🎯 크기 조정 시에도 중앙 정렬
         }
         return styles;
     }
@@ -2920,6 +2922,7 @@ class AdsModule {
             img.style.width = '100%';
             img.style.height = '100%';
             img.style.objectFit = 'cover';
+            img.style.objectPosition = 'center'; // 🎯 폴백 이미지도 중앙 정렬
             adElement.appendChild(img);
         }
     }

package/dist/index.esm.js

@@ -392,6 +392,7 @@ class BaseAdRenderer {
             display: 'block',
             'max-width': '100%',
             height: 'auto',
+            'object-position': 'center', // 🎯 이미지 항상 중앙 정렬
         };
         // 사용자가 컨테이너 크기를 지정한 경우에만 크기 제한
         const parsedWidth = this.parseSizeValue(slot?.width);
@@ -400,6 +401,7 @@ class BaseAdRenderer {
             styles.width = '100%';
             styles.height = '100%';
             styles['object-fit'] = 'cover';
+            styles['object-position'] = 'center'; // 🎯 크기 조정 시에도 중앙 정렬
         }
         return styles;
     }
@@ -2918,6 +2920,7 @@ class AdsModule {
             img.style.width = '100%';
             img.style.height = '100%';
             img.style.objectFit = 'cover';
+            img.style.objectPosition = 'center'; // 🎯 폴백 이미지도 중앙 정렬
             adElement.appendChild(img);
         }
     }

package/dist/index.standalone.js

@@ -392,6 +392,7 @@ class BaseAdRenderer {
             display: 'block',
             'max-width': '100%',
             height: 'auto',
+            'object-position': 'center', // 🎯 이미지 항상 중앙 정렬
         };
         // 사용자가 컨테이너 크기를 지정한 경우에만 크기 제한
         const parsedWidth = this.parseSizeValue(slot?.width);
@@ -400,6 +401,7 @@ class BaseAdRenderer {
             styles.width = '100%';
             styles.height = '100%';
             styles['object-fit'] = 'cover';
+            styles['object-position'] = 'center'; // 🎯 크기 조정 시에도 중앙 정렬
         }
         return styles;
     }
@@ -2918,6 +2920,7 @@ class AdsModule {
             img.style.width = '100%';
             img.style.height = '100%';
             img.style.objectFit = 'cover';
+            img.style.objectPosition = 'center'; // 🎯 폴백 이미지도 중앙 정렬
             adElement.appendChild(img);
         }
     }

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@adstage/web-sdk",
-  "version": "2.2.0",
-  "description": "AdStage Web SDK - Production-ready marketing platform SDK with auto-initialization and namespace architecture",
+  "version": "2.2.1",
+  "description": "AdStage Web SDK - Production-ready marketing platform SDK with auto-initialization, dynamic sizing, and centered image positioning",
   "type": "module",
   "main": "dist/index.cjs.js",
   "module": "dist/index.esm.js",

package/src/modules/ads/AdsModule.ts

@@ -1119,6 +1119,7 @@ export class AdsModule implements BaseModule {
       img.style.width = '100%';
       img.style.height = '100%';
       img.style.objectFit = 'cover';
+      img.style.objectPosition = 'center'; // 🎯 폴백 이미지도 중앙 정렬
       adElement.appendChild(img);
     }
   }

package/src/renderers/base-renderer.ts

@@ -110,6 +110,7 @@ export abstract class BaseAdRenderer implements AdRenderer {
       display: 'block',
       'max-width': '100%',
       height: 'auto',
+      'object-position': 'center', // 🎯 이미지 항상 중앙 정렬
     };
     
     // 사용자가 컨테이너 크기를 지정한 경우에만 크기 제한
@@ -120,6 +121,7 @@ export abstract class BaseAdRenderer implements AdRenderer {
       styles.width = '100%';
       styles.height = '100%';
       styles['object-fit'] = 'cover';
+      styles['object-position'] = 'center'; // 🎯 크기 조정 시에도 중앙 정렬
     }
     
     return styles;