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

Posted 2023-02-25

【中文标题】移动版网站上的图像被裁剪掉（Squarespace）

【英文标题】：Images on mobile version of site get cropped off (Squarespace)

【发布时间】：2020-05-26 09:34:41

【问题描述】：

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

这里有一个很好的例子：

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

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

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

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

【问题讨论】：

是的。你试过什么？你用什么代码？检查.ProductItem-gallery-slides:before

【参考方案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;
  

【讨论】：

这句话非常好！非常感谢这个修复。我想知道为什么 Squarespace 不允许在控制面板中这样做？