添加Isotope后Squarespace店铺图片缩放的修复咨询

我正在搭建一个展示等尺寸图片的Squarespace店铺，为实现排序功能在页面中添加Isotope后，所有图片均被缩放变形。是否存在简便的修复方法？

效果对比 #

• 未添加Isotope的效果：
  
• 添加Isotope后的效果：
  

当前使用的Isotope代码 #

<script>
    var elem;
    var iso;
    window.onload = function(){
        elem = document.querySelector('.list-grid');
        iso = new Isotope( elem, {
        //options
        percentPosition: true,
        itemSelector: '.grid-item',
        layoutMode: 'fitRows',
        containerStyle: null,
        resize: false,
        fitRows: {
            equalheight: true,
            gutter: 30
        },
        getSortData: {
          name: '.grid-title'
        }
    });
  }

  function myFunction(name) {
    iso.arrange({ sortBy: name });
  }
</script>

页面GRID结构（Chrome开发者工具查看） #

<div class="products-flex-container">
  <div class="
      list-grid
      
    ">

    <div class="grid-item hentry author-esther-matthews post-type-store-item article-index-1 sold-out sqs-product-quick-view-button-hover-area is-loaded" id="thumb-aeschynanthus-black-pagoda-lipstick-plant" data-item-id="638d7869e784783f3547e01d" data-controller="ProductListImageLoader" data-controllers-bound="ProductListImageLoader">
      <a href="/shop/p/aeschynanthus-black-pagoda-lipstick-plant" aria-label="Aeschynanthus ‘Black Pagoda’ (Lipstick Plant)" class="grid-item-link">
      </a>

      <figure class="grid-image" data-animation-role="image" data-test="plp-grid-image">
        <div class="grid-image-wrapper has-hover-img">


          <img data-src="https://images.squarespace-cdn.com/content/v1/633d431ca8ef9d31ac428403/1670216040701-HSTA1368VGFYAQJK2N48/Black+pagoda1+-+Copy.jpg" data-image="https://images.squarespace-cdn.com/content/v1/633d431ca8ef9d31ac428403/1670216040701-HSTA1368VGFYAQJK2N48/Black+pagoda1+-+Copy.jpg" data-image-dimensions="3024x4032" data-image-focal-point="0.5,0.5" alt="Black pagoda1 - Copy.jpg" data-load="false" class="grid-item-image
            grid-image-cover" style="width: 100%; height: 100%; object-position: 50% 50%; object-fit: cover;" data-parent-ratio="0.8" data-image-resolution="750w" src="https://images.squarespace-cdn.com/content/v1/633d431ca8ef9d31ac428403/1670216040701-HSTA1368VGFYAQJK2N48/Black+pagoda1+-+Copy.jpg?format=750w">




          <img data-src="https://images.squarespace-cdn.com/content/v1/633d431ca8ef9d31ac428403/1670216040942-WZ75UU2F5NTZSYS6J5B6/Black+pagoda2+-+Copy.jpg" data-image="https://images.squarespace-cdn.com/content/v1/633d431ca8ef9d31ac428403/1670216040942-WZ75UU2F5NTZSYS6J5B6/Black+pagoda2+-+Copy.jpg" data-image-dimensions="3024x4032" data-image-focal-point="0.5,0.5" alt="Black pagoda2 - Copy.jpg" data-load="false" class="grid-item-image
            grid-image-hover" style="width: 100%; height: 100%; object-position: 50% 50%; object-fit: cover;" data-parent-ratio="0.8" data-image-resolution="750w" src="https://images.squarespace-cdn.com/content/v1/633d431ca8ef9d31ac428403/1670216040942-WZ75UU2F5NTZSYS6J5B6/Black+pagoda2+-+Copy.jpg?format=750w">




        </div>
      </figure>

      <section class="grid-meta-wrapper" data-animation-role="content">
        <div class="grid-main-meta">

          <div class="grid-title" data-test="plp-grid-title">
            Aeschynanthus ‘Black Pagoda’ (Lipstick Plant)
          </div>


          <div class="grid-prices" data-test="plp-grid-prices">



            <div class="product-price">
              $17.00
            </div>
          </div>
        </div>
        <div class="grid-meta-status" data-test="plp-grid-status">

          <div class="product-mark sold-out">Sold Out</div>
        </div>
      </section>
</div>

修复方法 #

问题根源是Isotope的fitRows布局配置与Squarespace原生的图片容器比例逻辑冲突，导致图片被强制拉伸。以下是几种简便修复方案：

方案1：调整Isotope布局模式 #

替换fitRows为masonry布局，它更适配Squarespace的网格尺寸逻辑，同时去掉equalheight配置：

iso = new Isotope( elem, {
    percentPosition: true,
    itemSelector: '.grid-item',
    layoutMode: 'masonry', // 替换为masonry布局
    containerStyle: null,
    resize: false,
    masonry: {
        gutter: 30,
        columnWidth: '.grid-item' // 沿用Squarespace的列宽设置
    },
    getSortData: {
      name: '.grid-title'
    }
});

方案2：强制保留图片容器原生比例 #

在Squarespace的设置 > 高级 > 自定义CSS中添加以下代码，锁定网格项的宽高比：

.grid-item {
    aspect-ratio: 1 / 0.8 !important; /* 对应页面中data-parent-ratio="0.8"的比例 */
    height: auto !important; /* 覆盖Isotope强制设置的高度 */
}

.grid-image-wrapper {
    height: 100% !important;
}

方案3：延迟初始化Isotope #

等Squarespace的图片和网格完全渲染后再初始化Isotope，避免读取未稳定的元素尺寸：

document.addEventListener('DOMContentLoaded', function() {
    setTimeout(function() {
        elem = document.querySelector('.list-grid');
        iso = new Isotope( elem, {
            percentPosition: true,
            itemSelector: '.grid-item',
            layoutMode: 'fitRows',
            containerStyle: null,
            resize: false,
            fitRows: {
                gutter: 30 // 移除equalheight配置
            },
            getSortData: {
              name: '.grid-title'
            }
        });
    }, 1000); // 延迟1秒确保页面完全渲染
});

内容的提问来源于stack exchange，提问作者Schwarz Software