移动版网站上的图像被裁剪掉（Squarespace）

Question

在 Squarespace 中，移动版图片会被裁剪。

这里有一个很好的例子：

https://www.nigelartingstall.com/new-editions/green%20woodpeckers

图片在桌面上完整显示，但低于 768 像素时会裁剪为正方形。

该网站有不同比例的图片，包括正方形、纵向、横向和宽屏。因此，无论我在 Squarespace 中对图像比例使用什么设置，都无法在不裁剪移动设备的情况下显示所有图像，但在桌面上它们都可以。

是否有 CSS 解决方案可以像在桌面上一样在移动设备上工作？

Answer 1

是的，您可以在 Squarespace 中使用 CSS 解决此问题。由于 Squarespace 没有让您选择让图像在移动设备上保持其原生纵横比，因此必须将其覆盖。此外，页面上的 JavaScript 在添加后可能会针对某些 CSS 规则进行调整，因此我们也必须添加另一个规则来覆盖它。

以下通过自定义 CSS 插入的 CSS 应该可以实现：

.ProductItem-gallery-slides-item-image {
  position: relative !important;
}
@media screen and (max-width: 767px) {
  .tweak-product-basic-item-gallery-design-stacked .ProductItem-gallery-slides::before {
    padding-bottom: 0;
  }
  .ProductItem-gallery-slides-item {
    position: relative;
  }
}