Merge pull request #5456 from nanasess/fix-imagesize

[4.2]ウィンドウ幅が630px未満の場合, 画像サイズが崩れるのを修正
EC-CUBE · Jul 21, 2022 · 27b3131 · 27b3131
2 parents 8a2cd75 + 477cb8f
commit 27b3131
Show file tree

Hide file tree

Showing 2 changed files with 35 additions and 1 deletion.
diff --git a/src/Eccube/Resource/template/default/Product/detail.twig b/src/Eccube/Resource/template/default/Product/detail.twig
@@ -122,6 +122,40 @@ file that was distributed with this source code.
                 }
             });
 
+            // Core Web Vital の Cumulative Layout Shift(CLS)対策のため
+            // img タグに width, height が付与されている.
+            // 630px 未満の画面サイズでは縦横比が壊れるための対策
+            // see https://github.com/EC-CUBE/ec-cube/pull/5023
+            $('.ec-grid2__cell').hide();
+            var removeSize = function () {
+                $('.slide-item').height('');
+                $('.slide-item img')
+                    .removeAttr('width')
+                    .removeAttr('height')
+                    .removeAttr('style');
+            };
+            var slickInitial = function(slick) {
+                $('.ec-grid2__cell').fadeIn(1500);
+                var baseHeight = $(slick.target).height();
+                var baseWidth = $(slick.target).width();
+                var rate = baseWidth / baseHeight;
+
+                $('.slide-item').height(baseHeight * rate); // 余白を削除する
+                // transform を使用することでCLSの影響を受けないようにする
+                $('.slide-item img')
+                    .css(
+                        {
+                            'transform-origin': 'top left',
+                            'transform': 'scaleY(' + rate + ')',
+                            'transition': 'transform .1s'
+                        }
+                    );
+                // 正しいサイズに近くなったら属性を解除する
+                setTimeout(removeSize, 500);
+            };
+            $('.item_visual').on('init', slickInitial);
+            // リサイズ時は CLS の影響を受けないため属性を解除する
+            $(window).resize(removeSize);
             $('.item_visual').slick({
                 dots: false,
                 arrows: false,

diff --git a/src/Eccube/Resource/template/default/Product/list.twig b/src/Eccube/Resource/template/default/Product/list.twig
@@ -154,7 +154,7 @@ file that was distributed with this source code.
                         <li class="ec-shelfGrid__item">
                             <a href="{{ url('product_detail', {'id': Product.id}) }}">
                                 <p class="ec-shelfGrid__item-image">
-                                    <img src="{{ asset(Product.main_list_image|no_image_product, 'save_image') }}" alt="{{ Product.name }}" width="249" height="249"{% if loop.index > 5 %} loading="lazy"{% endif %}>
+                                    <img src="{{ asset(Product.main_list_image|no_image_product, 'save_image') }}" alt="{{ Product.name }}" {% if loop.index > 5 %} loading="lazy"{% endif %}>
                                 </p>
                                 <p>{{ Product.name }}</p>
                                 {% if Product.description_list %}