@adstage/web-sdk 2.2.1 → 2.2.3

package/dist/index.cjs.js

@@ -392,18 +392,23 @@ class BaseAdRenderer {
     getImageStyles(slot) {
         const styles = {
             display: 'block',
-            'max-width': '100%',
-            height: 'auto',
             'object-position': 'center', // 🎯 이미지 항상 중앙 정렬
         };
-        // 사용자가 컨테이너 크기를 지정한 경우에만 크기 제한
+        // 사용자가 컨테이너 크기를 지정했는지 확인
         const parsedWidth = this.parseSizeValue(slot?.width);
         const parsedHeight = this.parseSizeValue(slot?.height);
-        if (parsedWidth && parsedHeight) {
+        const hasUserDefinedSize = parsedWidth || parsedHeight;
+        if (hasUserDefinedSize) {
+            // 🎯 사용자가 크기를 지정한 경우: 컨테이너에 꽉 차도록 설정
             styles.width = '100%';
             styles.height = '100%';
-            styles['object-fit'] = 'cover';
-            styles['object-position'] = 'center'; // 🎯 크기 조정 시에도 중앙 정렬
+            styles['object-fit'] = 'cover'; // 컨테이너에 꽉 찬 상태로 비율 유지
+            styles['object-position'] = 'center';
+        }
+        else {
+            // 사용자가 크기를 지정하지 않은 경우: 원본 이미지 크기 유지
+            styles['max-width'] = '100%';
+            styles.height = 'auto';
         }
         return styles;
     }
@@ -911,7 +916,7 @@ class CarouselSliderManager {
         let currentSlide = 0;
         const totalSlides = advertisements.length;
         const autoSlideInterval = (options?.autoSlideInterval || 3) * 1000; // 기본 3초
-        // 슬라이드 이동 함수 (무한 루프 지원)
+        // 슬라이드 이동 함수 (무한 루프 지원 + 동적 높이 조정)
         const moveToSlide = (index, instant = false) => {
             currentSlide = index;
             // 애니메이션 임시 비활성화 (무한 루프용)
@@ -923,6 +928,33 @@ class CarouselSliderManager {
             }
             // 항상 퍼센트 기반으로 이동
             slideContainer.style.transform = `translateX(-${(100 / extendedAds.length) * currentSlide}%)`;
+            // 🆕 동적 높이 조정: 현재 슬라이드의 이미지 높이에 맞춰 컨테이너 높이 조정
+            if (!instant && !slot.height && !slot.width) { // 사용자가 크기를 지정하지 않은 경우에만
+                const currentSlideElement = slideContainer.children[currentSlide];
+                if (currentSlideElement) {
+                    const currentAdElement = currentSlideElement.children[0];
+                    if (currentAdElement) {
+                        // 이미지 요소 찾기
+                        const imgElement = currentAdElement.querySelector('img');
+                        if (imgElement) {
+                            // 이미지 로드 완료 후 높이 조정
+                            const adjustHeight = () => {
+                                const imgHeight = imgElement.getBoundingClientRect().height;
+                                if (imgHeight > 0) {
+                                    sliderWrapper.style.height = `${imgHeight}px`;
+                                    sliderWrapper.style.transition = instant ? 'none' : 'height 0.4s ease-out';
+                                }
+                            };
+                            if (imgElement.complete && imgElement.naturalHeight > 0) {
+                                adjustHeight();
+                            }
+                            else {
+                                imgElement.addEventListener('load', adjustHeight, { once: true });
+                            }
+                        }
+                    }
+                }
+            }
             // 도트 업데이트 (무채색 스타일) - 실제 광고 인덱스 기준, 텍스트 광고가 아닐 때만
             const actualIndex = currentSlide === totalSlides ? 0 : currentSlide;
             if (dotContainer) {
@@ -2886,23 +2918,45 @@ class AdsModule {
      */
     async renderOptimizedBannerImage(adElement, ad, slot) {
         try {
-            // 이미지 크기 정보 로드
-            const imageDimensions = await this.loadImageDimensions(ad.imageUrl);
-            const imageAspectRatio = imageDimensions.width / imageDimensions.height;
-            // 컨테이너 비율 계산
-            const containerAspectRatio = slot.aspectRatio || 16 / 9;
+            // 사용자가 크기를 지정했는지 확인
+            const configWidth = slot.config?.width;
+            const configHeight = slot.config?.height;
+            const hasUserDefinedWidth = configWidth &&
+                (typeof configWidth === 'number' || (typeof configWidth === 'string' && configWidth !== '100%'));
+            const hasUserDefinedHeight = configHeight &&
+                (typeof configHeight === 'number' || (typeof configHeight === 'string' && configHeight !== 'auto'));
+            const hasUserDefinedSize = hasUserDefinedWidth || hasUserDefinedHeight;
             // 이미지 요소 생성
             const img = document.createElement('img');
             img.src = ad.imageUrl;
             img.alt = ad.title;
-            img.style.width = '100%';
-            img.style.height = '100%';
-            // 🎨 최적화된 스타일 적용
-            this.applyOptimizedImageStyle(img, imageAspectRatio, containerAspectRatio);
+            if (hasUserDefinedSize) {
+                // 🎯 사용자가 크기를 지정한 경우: 컨테이너에 꽉 차도록 설정
+                img.style.width = '100%';
+                img.style.height = '100%';
+                img.style.objectFit = 'cover'; // 컨테이너에 꽉 찬 상태로 비율 유지
+                img.style.objectPosition = 'center';
+                if (this._config?.debug) {
+                    console.log(`🎯 User-defined size detected: filling container completely`);
+                }
+            }
+            else {
+                // 사용자가 크기를 지정하지 않은 경우: 동적 최적화 적용
+                const imageDimensions = await this.loadImageDimensions(ad.imageUrl);
+                const imageAspectRatio = imageDimensions.width / imageDimensions.height;
+                const containerAspectRatio = slot.aspectRatio || 16 / 9;
+                img.style.width = '100%';
+                img.style.height = '100%';
+                // 🎨 최적화된 스타일 적용
+                this.applyOptimizedImageStyle(img, imageAspectRatio, containerAspectRatio);
+                if (this._config?.debug) {
+                    console.log(`🖼️ Optimized banner image loaded: ${imageDimensions.width}x${imageDimensions.height} (ratio: ${imageAspectRatio.toFixed(2)})`);
+                }
+            }
             // 이미지 로드 완료 처리
             img.onload = () => {
                 if (this._config?.debug) {
-                    console.log(`🖼️ Optimized banner image loaded: ${imageDimensions.width}x${imageDimensions.height} (ratio: ${imageAspectRatio.toFixed(2)})`);
+                    console.log(`✅ Banner image loaded successfully`);
                 }
             };
             // 에러 처리

package/dist/index.esm.js

@@ -390,18 +390,23 @@ class BaseAdRenderer {
     getImageStyles(slot) {
         const styles = {
             display: 'block',
-            'max-width': '100%',
-            height: 'auto',
             'object-position': 'center', // 🎯 이미지 항상 중앙 정렬
         };
-        // 사용자가 컨테이너 크기를 지정한 경우에만 크기 제한
+        // 사용자가 컨테이너 크기를 지정했는지 확인
         const parsedWidth = this.parseSizeValue(slot?.width);
         const parsedHeight = this.parseSizeValue(slot?.height);
-        if (parsedWidth && parsedHeight) {
+        const hasUserDefinedSize = parsedWidth || parsedHeight;
+        if (hasUserDefinedSize) {
+            // 🎯 사용자가 크기를 지정한 경우: 컨테이너에 꽉 차도록 설정
             styles.width = '100%';
             styles.height = '100%';
-            styles['object-fit'] = 'cover';
-            styles['object-position'] = 'center'; // 🎯 크기 조정 시에도 중앙 정렬
+            styles['object-fit'] = 'cover'; // 컨테이너에 꽉 찬 상태로 비율 유지
+            styles['object-position'] = 'center';
+        }
+        else {
+            // 사용자가 크기를 지정하지 않은 경우: 원본 이미지 크기 유지
+            styles['max-width'] = '100%';
+            styles.height = 'auto';
         }
         return styles;
     }
@@ -909,7 +914,7 @@ class CarouselSliderManager {
         let currentSlide = 0;
         const totalSlides = advertisements.length;
         const autoSlideInterval = (options?.autoSlideInterval || 3) * 1000; // 기본 3초
-        // 슬라이드 이동 함수 (무한 루프 지원)
+        // 슬라이드 이동 함수 (무한 루프 지원 + 동적 높이 조정)
         const moveToSlide = (index, instant = false) => {
             currentSlide = index;
             // 애니메이션 임시 비활성화 (무한 루프용)
@@ -921,6 +926,33 @@ class CarouselSliderManager {
             }
             // 항상 퍼센트 기반으로 이동
             slideContainer.style.transform = `translateX(-${(100 / extendedAds.length) * currentSlide}%)`;
+            // 🆕 동적 높이 조정: 현재 슬라이드의 이미지 높이에 맞춰 컨테이너 높이 조정
+            if (!instant && !slot.height && !slot.width) { // 사용자가 크기를 지정하지 않은 경우에만
+                const currentSlideElement = slideContainer.children[currentSlide];
+                if (currentSlideElement) {
+                    const currentAdElement = currentSlideElement.children[0];
+                    if (currentAdElement) {
+                        // 이미지 요소 찾기
+                        const imgElement = currentAdElement.querySelector('img');
+                        if (imgElement) {
+                            // 이미지 로드 완료 후 높이 조정
+                            const adjustHeight = () => {
+                                const imgHeight = imgElement.getBoundingClientRect().height;
+                                if (imgHeight > 0) {
+                                    sliderWrapper.style.height = `${imgHeight}px`;
+                                    sliderWrapper.style.transition = instant ? 'none' : 'height 0.4s ease-out';
+                                }
+                            };
+                            if (imgElement.complete && imgElement.naturalHeight > 0) {
+                                adjustHeight();
+                            }
+                            else {
+                                imgElement.addEventListener('load', adjustHeight, { once: true });
+                            }
+                        }
+                    }
+                }
+            }
             // 도트 업데이트 (무채색 스타일) - 실제 광고 인덱스 기준, 텍스트 광고가 아닐 때만
             const actualIndex = currentSlide === totalSlides ? 0 : currentSlide;
             if (dotContainer) {
@@ -2884,23 +2916,45 @@ class AdsModule {
      */
     async renderOptimizedBannerImage(adElement, ad, slot) {
         try {
-            // 이미지 크기 정보 로드
-            const imageDimensions = await this.loadImageDimensions(ad.imageUrl);
-            const imageAspectRatio = imageDimensions.width / imageDimensions.height;
-            // 컨테이너 비율 계산
-            const containerAspectRatio = slot.aspectRatio || 16 / 9;
+            // 사용자가 크기를 지정했는지 확인
+            const configWidth = slot.config?.width;
+            const configHeight = slot.config?.height;
+            const hasUserDefinedWidth = configWidth &&
+                (typeof configWidth === 'number' || (typeof configWidth === 'string' && configWidth !== '100%'));
+            const hasUserDefinedHeight = configHeight &&
+                (typeof configHeight === 'number' || (typeof configHeight === 'string' && configHeight !== 'auto'));
+            const hasUserDefinedSize = hasUserDefinedWidth || hasUserDefinedHeight;
             // 이미지 요소 생성
             const img = document.createElement('img');
             img.src = ad.imageUrl;
             img.alt = ad.title;
-            img.style.width = '100%';
-            img.style.height = '100%';
-            // 🎨 최적화된 스타일 적용
-            this.applyOptimizedImageStyle(img, imageAspectRatio, containerAspectRatio);
+            if (hasUserDefinedSize) {
+                // 🎯 사용자가 크기를 지정한 경우: 컨테이너에 꽉 차도록 설정
+                img.style.width = '100%';
+                img.style.height = '100%';
+                img.style.objectFit = 'cover'; // 컨테이너에 꽉 찬 상태로 비율 유지
+                img.style.objectPosition = 'center';
+                if (this._config?.debug) {
+                    console.log(`🎯 User-defined size detected: filling container completely`);
+                }
+            }
+            else {
+                // 사용자가 크기를 지정하지 않은 경우: 동적 최적화 적용
+                const imageDimensions = await this.loadImageDimensions(ad.imageUrl);
+                const imageAspectRatio = imageDimensions.width / imageDimensions.height;
+                const containerAspectRatio = slot.aspectRatio || 16 / 9;
+                img.style.width = '100%';
+                img.style.height = '100%';
+                // 🎨 최적화된 스타일 적용
+                this.applyOptimizedImageStyle(img, imageAspectRatio, containerAspectRatio);
+                if (this._config?.debug) {
+                    console.log(`🖼️ Optimized banner image loaded: ${imageDimensions.width}x${imageDimensions.height} (ratio: ${imageAspectRatio.toFixed(2)})`);
+                }
+            }
             // 이미지 로드 완료 처리
             img.onload = () => {
                 if (this._config?.debug) {
-                    console.log(`🖼️ Optimized banner image loaded: ${imageDimensions.width}x${imageDimensions.height} (ratio: ${imageAspectRatio.toFixed(2)})`);
+                    console.log(`✅ Banner image loaded successfully`);
                 }
             };
             // 에러 처리

package/dist/index.standalone.js

@@ -390,18 +390,23 @@ class BaseAdRenderer {
     getImageStyles(slot) {
         const styles = {
             display: 'block',
-            'max-width': '100%',
-            height: 'auto',
             'object-position': 'center', // 🎯 이미지 항상 중앙 정렬
         };
-        // 사용자가 컨테이너 크기를 지정한 경우에만 크기 제한
+        // 사용자가 컨테이너 크기를 지정했는지 확인
         const parsedWidth = this.parseSizeValue(slot?.width);
         const parsedHeight = this.parseSizeValue(slot?.height);
-        if (parsedWidth && parsedHeight) {
+        const hasUserDefinedSize = parsedWidth || parsedHeight;
+        if (hasUserDefinedSize) {
+            // 🎯 사용자가 크기를 지정한 경우: 컨테이너에 꽉 차도록 설정
             styles.width = '100%';
             styles.height = '100%';
-            styles['object-fit'] = 'cover';
-            styles['object-position'] = 'center'; // 🎯 크기 조정 시에도 중앙 정렬
+            styles['object-fit'] = 'cover'; // 컨테이너에 꽉 찬 상태로 비율 유지
+            styles['object-position'] = 'center';
+        }
+        else {
+            // 사용자가 크기를 지정하지 않은 경우: 원본 이미지 크기 유지
+            styles['max-width'] = '100%';
+            styles.height = 'auto';
         }
         return styles;
     }
@@ -909,7 +914,7 @@ class CarouselSliderManager {
         let currentSlide = 0;
         const totalSlides = advertisements.length;
         const autoSlideInterval = (options?.autoSlideInterval || 3) * 1000; // 기본 3초
-        // 슬라이드 이동 함수 (무한 루프 지원)
+        // 슬라이드 이동 함수 (무한 루프 지원 + 동적 높이 조정)
         const moveToSlide = (index, instant = false) => {
             currentSlide = index;
             // 애니메이션 임시 비활성화 (무한 루프용)
@@ -921,6 +926,33 @@ class CarouselSliderManager {
             }
             // 항상 퍼센트 기반으로 이동
             slideContainer.style.transform = `translateX(-${(100 / extendedAds.length) * currentSlide}%)`;
+            // 🆕 동적 높이 조정: 현재 슬라이드의 이미지 높이에 맞춰 컨테이너 높이 조정
+            if (!instant && !slot.height && !slot.width) { // 사용자가 크기를 지정하지 않은 경우에만
+                const currentSlideElement = slideContainer.children[currentSlide];
+                if (currentSlideElement) {
+                    const currentAdElement = currentSlideElement.children[0];
+                    if (currentAdElement) {
+                        // 이미지 요소 찾기
+                        const imgElement = currentAdElement.querySelector('img');
+                        if (imgElement) {
+                            // 이미지 로드 완료 후 높이 조정
+                            const adjustHeight = () => {
+                                const imgHeight = imgElement.getBoundingClientRect().height;
+                                if (imgHeight > 0) {
+                                    sliderWrapper.style.height = `${imgHeight}px`;
+                                    sliderWrapper.style.transition = instant ? 'none' : 'height 0.4s ease-out';
+                                }
+                            };
+                            if (imgElement.complete && imgElement.naturalHeight > 0) {
+                                adjustHeight();
+                            }
+                            else {
+                                imgElement.addEventListener('load', adjustHeight, { once: true });
+                            }
+                        }
+                    }
+                }
+            }
             // 도트 업데이트 (무채색 스타일) - 실제 광고 인덱스 기준, 텍스트 광고가 아닐 때만
             const actualIndex = currentSlide === totalSlides ? 0 : currentSlide;
             if (dotContainer) {
@@ -2884,23 +2916,45 @@ class AdsModule {
      */
     async renderOptimizedBannerImage(adElement, ad, slot) {
         try {
-            // 이미지 크기 정보 로드
-            const imageDimensions = await this.loadImageDimensions(ad.imageUrl);
-            const imageAspectRatio = imageDimensions.width / imageDimensions.height;
-            // 컨테이너 비율 계산
-            const containerAspectRatio = slot.aspectRatio || 16 / 9;
+            // 사용자가 크기를 지정했는지 확인
+            const configWidth = slot.config?.width;
+            const configHeight = slot.config?.height;
+            const hasUserDefinedWidth = configWidth &&
+                (typeof configWidth === 'number' || (typeof configWidth === 'string' && configWidth !== '100%'));
+            const hasUserDefinedHeight = configHeight &&
+                (typeof configHeight === 'number' || (typeof configHeight === 'string' && configHeight !== 'auto'));
+            const hasUserDefinedSize = hasUserDefinedWidth || hasUserDefinedHeight;
             // 이미지 요소 생성
             const img = document.createElement('img');
             img.src = ad.imageUrl;
             img.alt = ad.title;
-            img.style.width = '100%';
-            img.style.height = '100%';
-            // 🎨 최적화된 스타일 적용
-            this.applyOptimizedImageStyle(img, imageAspectRatio, containerAspectRatio);
+            if (hasUserDefinedSize) {
+                // 🎯 사용자가 크기를 지정한 경우: 컨테이너에 꽉 차도록 설정
+                img.style.width = '100%';
+                img.style.height = '100%';
+                img.style.objectFit = 'cover'; // 컨테이너에 꽉 찬 상태로 비율 유지
+                img.style.objectPosition = 'center';
+                if (this._config?.debug) {
+                    console.log(`🎯 User-defined size detected: filling container completely`);
+                }
+            }
+            else {
+                // 사용자가 크기를 지정하지 않은 경우: 동적 최적화 적용
+                const imageDimensions = await this.loadImageDimensions(ad.imageUrl);
+                const imageAspectRatio = imageDimensions.width / imageDimensions.height;
+                const containerAspectRatio = slot.aspectRatio || 16 / 9;
+                img.style.width = '100%';
+                img.style.height = '100%';
+                // 🎨 최적화된 스타일 적용
+                this.applyOptimizedImageStyle(img, imageAspectRatio, containerAspectRatio);
+                if (this._config?.debug) {
+                    console.log(`🖼️ Optimized banner image loaded: ${imageDimensions.width}x${imageDimensions.height} (ratio: ${imageAspectRatio.toFixed(2)})`);
+                }
+            }
             // 이미지 로드 완료 처리
             img.onload = () => {
                 if (this._config?.debug) {
-                    console.log(`🖼️ Optimized banner image loaded: ${imageDimensions.width}x${imageDimensions.height} (ratio: ${imageAspectRatio.toFixed(2)})`);
+                    console.log(`✅ Banner image loaded successfully`);
                 }
             };
             // 에러 처리

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@adstage/web-sdk",
-  "version": "2.2.1",
-  "description": "AdStage Web SDK - Production-ready marketing platform SDK with auto-initialization, dynamic sizing, and centered image positioning",
+  "version": "2.2.3",
+  "description": "AdStage Web SDK - Production-ready marketing platform SDK with auto-initialization, dynamic sizing, centered image positioning, user-defined size support, and adaptive height adjustment",
   "type": "module",
   "main": "dist/index.cjs.js",
   "module": "dist/index.esm.js",

package/src/managers/ads/carousel-slider-manager.ts

@@ -184,7 +184,7 @@ export class CarouselSliderManager {
     const totalSlides = advertisements.length;
     const autoSlideInterval = (options?.autoSlideInterval || 3) * 1000; // 기본 3초
 
-    // 슬라이드 이동 함수 (무한 루프 지원)
+    // 슬라이드 이동 함수 (무한 루프 지원 + 동적 높이 조정)
     const moveToSlide = (index: number, instant = false) => {
       currentSlide = index;
       
@@ -198,6 +198,36 @@ export class CarouselSliderManager {
       // 항상 퍼센트 기반으로 이동
       slideContainer.style.transform = `translateX(-${(100 / extendedAds.length) * currentSlide}%)`;
       
+      // 🆕 동적 높이 조정: 현재 슬라이드의 이미지 높이에 맞춰 컨테이너 높이 조정
+      if (!instant && !slot.height && !slot.width) { // 사용자가 크기를 지정하지 않은 경우에만
+        const actualIndex = currentSlide === totalSlides ? 0 : currentSlide;
+        const currentSlideElement = slideContainer.children[currentSlide] as HTMLElement;
+        
+        if (currentSlideElement) {
+          const currentAdElement = currentSlideElement.children[0] as HTMLElement;
+          if (currentAdElement) {
+            // 이미지 요소 찾기
+            const imgElement = currentAdElement.querySelector('img');
+            if (imgElement) {
+              // 이미지 로드 완료 후 높이 조정
+              const adjustHeight = () => {
+                const imgHeight = imgElement.getBoundingClientRect().height;
+                if (imgHeight > 0) {
+                  sliderWrapper.style.height = `${imgHeight}px`;
+                  sliderWrapper.style.transition = instant ? 'none' : 'height 0.4s ease-out';
+                }
+              };
+              
+              if (imgElement.complete && imgElement.naturalHeight > 0) {
+                adjustHeight();
+              } else {
+                imgElement.addEventListener('load', adjustHeight, { once: true });
+              }
+            }
+          }
+        }
+      }
+      
       // 도트 업데이트 (무채색 스타일) - 실제 광고 인덱스 기준, 텍스트 광고가 아닐 때만
       const actualIndex = currentSlide === totalSlides ? 0 : currentSlide;
       if (dotContainer) {

package/src/modules/ads/AdsModule.ts

@@ -1076,27 +1076,52 @@ export class AdsModule implements BaseModule {
    */
   private async renderOptimizedBannerImage(adElement: HTMLElement, ad: Advertisement, slot: AdSlot): Promise<void> {
     try {
-      // 이미지 크기 정보 로드
-      const imageDimensions = await this.loadImageDimensions(ad.imageUrl!);
-      const imageAspectRatio = imageDimensions.width / imageDimensions.height;
+      // 사용자가 크기를 지정했는지 확인
+      const configWidth = slot.config?.width;
+      const configHeight = slot.config?.height;
       
-      // 컨테이너 비율 계산
-      const containerAspectRatio = (slot as any).aspectRatio || 16/9;
+      const hasUserDefinedWidth = configWidth && 
+        (typeof configWidth === 'number' || (typeof configWidth === 'string' && configWidth !== '100%'));
+      const hasUserDefinedHeight = configHeight && 
+        (typeof configHeight === 'number' || (typeof configHeight === 'string' && configHeight !== 'auto'));
+      const hasUserDefinedSize = hasUserDefinedWidth || hasUserDefinedHeight;
       
       // 이미지 요소 생성
       const img = document.createElement('img');
       img.src = ad.imageUrl!;
       img.alt = ad.title;
-      img.style.width = '100%';
-      img.style.height = '100%';
       
-      // 🎨 최적화된 스타일 적용
-      this.applyOptimizedImageStyle(img, imageAspectRatio, containerAspectRatio);
+      if (hasUserDefinedSize) {
+        // 🎯 사용자가 크기를 지정한 경우: 컨테이너에 꽉 차도록 설정
+        img.style.width = '100%';
+        img.style.height = '100%';
+        img.style.objectFit = 'cover'; // 컨테이너에 꽉 찬 상태로 비율 유지
+        img.style.objectPosition = 'center';
+        
+        if (this._config?.debug) {
+          console.log(`🎯 User-defined size detected: filling container completely`);
+        }
+      } else {
+        // 사용자가 크기를 지정하지 않은 경우: 동적 최적화 적용
+        const imageDimensions = await this.loadImageDimensions(ad.imageUrl!);
+        const imageAspectRatio = imageDimensions.width / imageDimensions.height;
+        const containerAspectRatio = (slot as any).aspectRatio || 16/9;
+        
+        img.style.width = '100%';
+        img.style.height = '100%';
+        
+        // 🎨 최적화된 스타일 적용
+        this.applyOptimizedImageStyle(img, imageAspectRatio, containerAspectRatio);
+        
+        if (this._config?.debug) {
+          console.log(`🖼️ Optimized banner image loaded: ${imageDimensions.width}x${imageDimensions.height} (ratio: ${imageAspectRatio.toFixed(2)})`);
+        }
+      }
       
       // 이미지 로드 완료 처리
       img.onload = () => {
         if (this._config?.debug) {
-          console.log(`🖼️ Optimized banner image loaded: ${imageDimensions.width}x${imageDimensions.height} (ratio: ${imageAspectRatio.toFixed(2)})`);
+          console.log(`✅ Banner image loaded successfully`);
         }
       };
       

package/src/renderers/base-renderer.ts

@@ -108,20 +108,24 @@ export abstract class BaseAdRenderer implements AdRenderer {
   protected getImageStyles(slot?: AdSlot): Record<string, string> {
     const styles: Record<string, string> = {
       display: 'block',
-      'max-width': '100%',
-      height: 'auto',
       'object-position': 'center', // 🎯 이미지 항상 중앙 정렬
     };
     
-    // 사용자가 컨테이너 크기를 지정한 경우에만 크기 제한
+    // 사용자가 컨테이너 크기를 지정했는지 확인
     const parsedWidth = this.parseSizeValue(slot?.width);
     const parsedHeight = this.parseSizeValue(slot?.height);
+    const hasUserDefinedSize = parsedWidth || parsedHeight;
     
-    if (parsedWidth && parsedHeight) {
+    if (hasUserDefinedSize) {
+      // 🎯 사용자가 크기를 지정한 경우: 컨테이너에 꽉 차도록 설정
       styles.width = '100%';
       styles.height = '100%';
-      styles['object-fit'] = 'cover';
-      styles['object-position'] = 'center'; // 🎯 크기 조정 시에도 중앙 정렬
+      styles['object-fit'] = 'cover'; // 컨테이너에 꽉 찬 상태로 비율 유지
+      styles['object-position'] = 'center';
+    } else {
+      // 사용자가 크기를 지정하지 않은 경우: 원본 이미지 크기 유지
+      styles['max-width'] = '100%';
+      styles.height = 'auto';
     }
     
     return styles;