移动版网站上的图像被裁掉（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;
  }
}

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

Images on mobile version of site get cropped off (Squarespace)

html

css

image

crop

squarespace