diff --git a/modules/ad_banner/_ad_banner_widget0.html.erb b/modules/ad_banner/_ad_banner_widget0.html.erb
index 5a2d7f1..70620a6 100644
--- a/modules/ad_banner/_ad_banner_widget0.html.erb
+++ b/modules/ad_banner/_ad_banner_widget0.html.erb
@@ -63,7 +63,62 @@
$('[data-subpart-id="{{subpart-id}}"] .prev-button').click(function(){
$(this).parent("ul").parent('.w-ba-banner').find(".cycle-slideshow").cycle("prev");
});
-
+ $(function() {
+ function updateBannerClip() {
+ $('.ba-banner-widget-0').each(function() {
+ var $banner = $(this);
+ var vpWidth = $(window).width();
+ var vpHeight = $(window).height();
+
+ // --- 寬度：找比 viewport 窄的父層容器 ---
+ var $container = null;
+ $banner.parents().each(function() {
+ var $el = $(this);
+ if ($el.outerWidth() < vpWidth - 10) {
+ $container = $el;
+ return false;
+ }
+ });
+
+ var clipLeft = 0;
+ var clipRight = 0;
+ if ($container && $container.length > 0) {
+ clipLeft = Math.max(0, $container.offset().left);
+ clipRight = Math.max(0, vpWidth - $container.offset().left - $container.outerWidth());
+ }
+
+ // --- 高度：依 .w-ad-banner 自己區塊的上下邊界裁切 ---
+ var bannerTop = $banner.offset().top - $(window).scrollTop();
+ var bannerBottom = vpHeight - bannerTop - $banner.outerHeight();
+
+ var clipTop = Math.max(0, bannerTop);
+ var clipBottom = Math.max(0, bannerBottom);
+
+ var clipValue = 'inset('
+ + clipTop + 'px '
+ + clipRight + 'px '
+ + clipBottom + 'px '
+ + clipLeft + 'px)';
+
+ $banner.find('img.w-ba-banner__image').css('clip-path', clipValue);
+ });
+ }
+
+ // 初始執行
+ setTimeout(updateBannerClip, 300);
+
+ // 視窗縮放時重新計算
+ var resizeTimer;
+ $(window).on('resize', function() {
+ clearTimeout(resizeTimer);
+ resizeTimer = setTimeout(updateBannerClip, 100);
+ });
+
+ // ✅ 滾動時也要更新，因為 bannerTop 會隨捲動改變
+ $(window).on('scroll', function() {
+ updateBannerClip();
+ });
+ });