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

Question

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

一个很好的例子在这里：

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

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

该网站具有不同比例的图像，包括正方形，人像，风景和宽屏。因此，无论我在Squarespace中使用哪种图像比例设置，都无法在不裁剪的情况下在移动设备上显示所有图像，但在台式机上都可以。

是否有CSS解决方案可以像在台式机上那样在移动设备上实现此功能？

Answer 1

是的，您可以使用CSS在Squarespace中解决此问题。因为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;
  }
}