在 Squarespace 中自定义图像大小和填充

Question

我不幸接手了用我们的最新成员更新我公司网站的任务。由于这是一家小公司，之前的人没有根据他创建网站的方式留下任何文档或注释。

基本上现在我们有一个包含图像块（内联，带标题）的会员页面。 Click here 以转到相关页面。

我正在尝试添加新成员，但之前的成员似乎进行了某种定制。添加一个新的图像块立即向我表明当前块与 squarespace 的默认块非常不同。 See here 对于我创建的登台页面，最新的图像块 (Simon McLean) 位于最右下角。

我花了几个小时才发现 Squarespace 在导入到图像块时实际上会调整图像的大小。所以我检查了 Chrome 上的元素，发现以下元素需要更改。以下是元素更改前和元素更改后的屏幕截图：

之前：

之后：

请注意，我只是通过查找示例中使用的图像旁边的图像来获得更改（即示例是 Anna 的图像，我正在尝试修复 Simon 的图像）。

请原谅菜鸟问题，但我如何使这些更改永久生效？到目前为止，我已经尝试了以下方法：

element.style {
    left: 0%;
    top: 0%;
    width: 100%;
    height: 100%;
    position: absolute;
    padding-bottom: 100%;
}

老实说，我没有想法 - 谢谢你帮助我。我绝对不在这里。

Answer 1

有两种方法可以解决您描述的问题。

1) 将 Simon 的原始图像调整为与其他原始图像相同的大小 (240x240) 在您上传之前。您可能需要添加一个新的空图像块（而不是简单地将新图像上传到现有图像块中的旧图像上），因为旧图像块可能会保留其不需要的 settings/aspect 比率。

2) 使用图像底部的 "handle" 将其 height/aspect-ratio 设置为您的偏好。

第三种选择是使用 CSS 并强制填充底部到所需的 height/aspect-ratio，但希望这是不必要的。

请注意，原始图像为 240x240，在高分辨率显示器上不会显得清晰。理想情况下，图像会以更高的分辨率上传，让 Squarespace 可以根据显示器确定最佳分辨率。理想情况下，所有此类图像都会在某个时候重新上传。

Customising Image size and padding in Squarespace