html - Squarespace 标题图像被不同的浏览器裁剪

Question

我注意到我们网站页面上标题图片的高度被裁剪了，但裁剪量取决于浏览器和页面。

我们所有的标题图片都是在调整为 2000 X 1252 像素后上传的(不要问，这是历史)，所有缩略图都是标题图片 (500 X 313) 的四分之一大小的副本

可以在我们的主页上看到精选的缩略图 nataal.com经过稍微向下滚动。
当前第一个是“MUZI”，并且此缩略图已正确呈现。单击缩略图会将您带到文章的页面。在 MS Edge 中查看它会显示整个宽度和大部分图像。从底部边缘裁剪掉大约 15%。在 Firefox 中，裁剪得更多，大约 40%。我认为根本不应该裁剪图像。

我曾尝试使用 Firefox 元素检查器，但高度显示为灰色，并且没有关于它是如何计算的或可能涉及什么 css 的信息。

我很高兴在“高级”选项卡中插入一些 javascript 或 css 或调整站点 css 文件，但这个让我打败了。这是 Squarespace 的另一个“feechur”，还是我在做一些非常愚蠢的事情？

这是在 Firefox 上运行的 Squarespace 编辑器中看到的图像，请注意它没有被裁剪
单击左上角的对 Angular 箭头隐藏 LH 导航并将图像扩展到全屏，它是仍未裁剪。

如在 MS Edge 中所见

如在 Firefox 中所见

以上所有屏幕截图均来自运行 Windows 10 的同一台 PC 上的同一台显示器

在主页上，另一种类型的页面，标题图片没有被裁剪。

Answer 1

我怀疑这里有两个因素:

1. 浏览器之间的差异可能是由于 A) 浏览器之间的缩放级别设置不同或 B) 浏览器之间的字体呈现(因为图像的高度基于页面内的文本) header )。使用键盘快捷键 CTRL+0 重置每个浏览器中的缩放级别，以确保这不是一个因素。如果这不能解决问题，则可能与字体有关。

2. 有问题的图像被用在页眉中，页眉使用 Squarespace 的“ImageLoader”缩放图像，以根据文本/字体大小和周围的填充/边距填充空间文本。这是 Squarespace 的一项功能，您可以通过更改浏览器宽度并观察图像的可视部分随之变化来查看它的实际效果。要记住的关键是，在像这样的“响应式”设计中，没有单一的图像大小。图像必须根据设备/浏览器大小缩放和更改纵横比。

您可以在 Squarespace's own help page about responsive design 上阅读有关第 2 点的更多信息.下面是一个示例，说明图像的可见部分必须如何更改才能保持页面的整体美感和文本的可读性:

目前，Squarespace 不提供任何基于“艺术指导”的图像选项。也就是说，目前无法为移动设备和桌面设备指定特定图像，例如，尽管在某些情况下可以使用 Javascript 和/或 CSS“伪造”它。

如果要修改图片的高度，必须改为修改图片高度所依据的内容的高度。图片高度以“MUZI Words Binwe Adebayo”文字为准。图像被设置为填充这些单词占据的区域的背景。

例如，您可以使用以下方法将图像设置为至少浏览器视口(viewport)的高度:

.title-desc-wrapper.has-main-image {
  min-height: 100vh;
}

如果这不是您想要的效果，您可以像这样为内部描述元素指定自己的顶部/底部填充:

.title--description-position-over-image.title--description-alignment-center .title-desc-inner {
    padding-top: 280px; /* or 20vw or whatever you like... */
    padding-bottom: 280px;
}

您当然可以使用这些值。

你看到的是图像的高度与文本的高度相关，因此通过调整文本描述的高度(通过 padding、min-height 或其他属性)，图像高度为调整(因为 ImageLoader 设置为根据文本设置图像大小)。

就您可以设置什么值来获得您想要的外观而言，可能性是无限的。但只要您牢记应该调整文本/说明的高度，您就会取得更大的成功。

请记住，可能需要使用 media queries和/或 !important 在每个宽度/断点处根据您的喜好设置文本/图像的高度。这就是为什么在 Squarespace 中特别注意图像裁剪/纵横比(以及一般的响应式设计，在某种程度上)是非常耗时的:很难准确知道每个版本的每个版本的文本大小每个设备上每个操作系统上的浏览器。