如何在Squarespace中动态调整图库容器使图片尺寸统一

这在Squarespace里完全可行，不用怀疑。下面是具体的JS+CSS方案，解决容器只按宽度适配的问题：

核心思路 #

根据图片原生宽高比判断横竖方向，分别设置固定尺寸：

• 横向图（宽>高）：1300px × 1000px
• 纵向图（高>宽）：1000px × 1300px
• 正方形图可自行指定统一尺寸

同时处理Squarespace的图片懒加载、动态加载（比如分页加载）场景，确保所有图片都能应用尺寸规则。

代码实现 #

1. JavaScript 代码（处理尺寸逻辑） #

function setGalleryImageSizes() {
  // 替换为你实际的图片选择器，可通过浏览器控制台查看元素类名
  const galleryImages = document.querySelectorAll('.gallery-container img');
  
  galleryImages.forEach(img => {
    // 确保图片加载完成后获取真实宽高
    if (img.complete) {
      applyFixedSize(img);
    } else {
      img.addEventListener('load', () => applyFixedSize(img));
    }
  });
}

function applyFixedSize(img) {
  const naturalWidth = img.naturalWidth;
  const naturalHeight = img.naturalHeight;

  if (naturalWidth > naturalHeight) {
    // 横向图设置尺寸
    img.style.width = '1300px';
    img.style.height = '1000px';
  } else if (naturalHeight > naturalWidth) {
    // 纵向图设置尺寸
    img.style.width = '1000px';
    img.style.height = '1300px';
  } else {
    // 正方形图，可自行调整尺寸
    img.style.width = '1300px';
    img.style.height = '1300px';
  }

  // 保持图片比例，避免拉伸（可选，按需选择cover/contain）
  img.style.objectFit = 'cover';
  // 同步调整图片父容器尺寸，避免布局错乱
  const itemContainer = img.closest('.gallery-item'); // 替换为实际父容器类名
  if (itemContainer) {
    itemContainer.style.width = img.style.width;
    itemContainer.style.height = img.style.height;
  }
}

// 页面初始加载完成后执行
document.addEventListener('DOMContentLoaded', setGalleryImageSizes);

// 监听图库容器的动态变化，处理分页加载的新图片
const galleryContainer = document.querySelector('.gallery-container');
if (galleryContainer) {
  const observer = new MutationObserver(() => setGalleryImageSizes());
  observer.observe(galleryContainer, { childList: true, subtree: true });
}

2. CSS 辅助代码（优化布局） #

.gallery-container {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(1000px, 1fr));
  gap: 1.5rem; /* 图片间距，按需调整 */
  justify-items: center;
}

.gallery-item {
  overflow: hidden; /* 配合object-fit: cover裁剪超出部分 */
}

Squarespace 添加代码方法 #

1. 进入后台，打开目标页面的「设置」→「高级」→「页面代码注入」
2. CSS代码放在「页眉」区域的<style>标签内：

   <style>
     /* 粘贴上面的CSS代码 */
   </style>
   

3. JavaScript代码放在「页脚」区域
4. 如果需要全站生效，改为去「设置」→「高级」→「代码注入」中添加

注意事项 #

• 检查图片和父容器的类名，确保选择器和Squarespace实际生成的HTML匹配
• objectFit属性：cover会裁剪图片填充尺寸，contain会完整显示图片（可能留空白），按需选择
• 测试前清除浏览器缓存，避免旧资源干扰

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