Flatsome主题如何设置全场景适配的1:1比例商品目录图片？

直接用CSS的aspect-ratio属性就能解决，不需要写一堆媒体查询，步骤如下：

• 找到Flatsome商品网格图片的容器选择器，通常是.product-grid-item .box-image（如果你的主题版本有差异，可通过浏览器开发者工具确认）
• 在主题的自定义CSS面板（外观 > 自定义 > 自定义CSS）中添加以下代码：

/* 强制商品图片容器为1:1比例 */
.product-grid-item .box-image {
  aspect-ratio: 1/1;
  overflow: hidden;
}

/* 让图片适配容器，保持比例填充 */
.product-grid-item .box-image img {
  width: 100%;
  height: 100%;
  object-fit: cover; /* 可选：换成contain则完整显示图片，容器留空白 */
}

说明 #

• aspect-ratio:1/1会让容器在任何屏幕尺寸下自动维持1:1的宽高比，完全不需要媒体查询适配不同设备
• object-fit:cover会让图片按比例填充容器，超出部分裁剪，保证容器填满；如果需要完整显示图片不裁剪，换成object-fit:contain即可，此时容器空白处可通过background-color设置背景色
• 若需兼容极旧浏览器，可添加fallback方案（用padding-top模拟比例）：

/* 旧浏览器fallback */
.product-grid-item .box-image {
  position: relative;
  height: 0;
  padding-top: 100%; /* 1:1比例 */
  overflow: hidden;
}

.product-grid-item .box-image img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

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