Squarespace header 图像被不同的浏览器裁剪
Squarespace header images are cropped by different browsers
我注意到我们网站页面上 header 图片的高度被裁剪了，但裁剪量取决于浏览器和页面。
我们所有的 header 图片都是在调整为 2000 X 1252 像素后上传的（不要问，这是历史），所有缩略图都是 header 图片的四分之一大小的副本（ 500 X 313)
可以在我们的主页上看到精选的缩略图 nataal.com
稍微向下滚动。
目前第一个是 "MUZI" 并且此缩略图已正确呈现。单击缩略图会将您带到文章的页面。在 MS Edge 中查看它会显示整个宽度和大部分图像。从底部边缘裁剪掉大约 15%。在 Firefox 中，裁剪得更多，大约 40%。我认为根本不应该裁剪图像。
我试过使用 Firefox 元素检查器，但高度显示为灰色，并且没有关于它是如何计算的或可能涉及的内容的信息 css。
我很高兴在 "Advanced" 选项卡中插入一些 javascript 或 css 或调整站点 css 文件，但这个让我击败了。这是 Squarespace 的另一个 "feechur"，还是我在做一些非常愚蠢的事情？
这是在 Firefox 上的 Squarespace 编辑器 运行 中看到的图像，请注意它没有被裁剪
单击左上角的对角箭头隐藏 LH 导航并展开图片全屏，还是没有裁剪。
如 MS Edge 中所见
如在 Firefox 中所见
以上所有屏幕截图均来自同一台 PC 上的同一台显示器 运行 Windows 10
在主页上，不同类型的页面，header 图片没有被裁剪。
我怀疑这里有两个因素：
浏览器之间的差异可能是由于 A) 浏览器之间的缩放级别设置不同或 B) 浏览器之间的字体渲染（因为图像的高度基于页眉中的文本）。使用键盘快捷键 CTRL+0 重置每个浏览器中的缩放级别，以确保这不是一个因素。如果那不能解决问题，可能 font-related.
页眉中使用了有问题的图像，页眉使用 Squarespace 的 "ImageLoader" 缩放图像以填充 space，基于 text/font 大小和文本周围的 padding/margin。这是 Squarespace 的一项功能，您可以通过更改浏览器宽度并观察图像的可视部分随之变化来查看它的实际效果。要记住的关键是，在这样的 "responsive" 设计中，没有 one-single 图像大小。图片必须根据 device/browser 大小缩放和更改宽高比。
您可以在 Squarespace's own help page about responsive design 上阅读有关第 2 点的更多信息。下面是一个示例，说明图像的可见部分必须如何更改才能保持页面的整体美感和文本的可读性：
目前，Squarespace 不提供任何基于 "art direction" 的图像选项。也就是说，目前无法为移动设备和桌面设备指定特定图像，例如，尽管在某些情况下它可以是 "faked" 和 Javascript and/or CSS。
如果要修改图片的高度，必须改为修改图片高度所依据的内容的高度。图像的高度基于 "MUZI Words Binwe Adebayo" 文本。图像设置为填充这些文字所占区域的背景。
例如，您可以通过以下方式将图像设置为至少浏览器视口的高度：
.title-desc-wrapper.has-main-image {
min-height: 100vh;
}
如果这不是您想要的效果，您可以为 inner-description 元素指定自己的 top/bottom 填充，如下所示：
.title--description-position-over-image.title--description-alignment-center .title-desc-inner {
padding-top: 280px; /* or 20vw or whatever you like... */
padding-bottom: 280px;
}
您当然可以使用这些值。
你看到的是图像的高度与文本的高度相关，因此通过调整文本描述的高度（通过填充、min-height 或其他属性），图片高度调整（因为ImageLoader设置为根据文字设置图片大小）。
就您可以设置什么值来获得您想要的外观而言，可能性是无限的。但只要您牢记应该调整 text/description 的高度，您就会取得更大的成功。
请记住，可能需要使用 media queries and/or !important 将 text/image 的高度设置为您喜欢的每个 width/breakpoint .这就是为什么在 Squarespace 中特别关注图像 cropping/aspect-ratio 非常耗时（在某种程度上通常是响应式设计）：很难准确知道文本的大小在每台设备上的每个操作系统上的每个浏览器的每个版本上。
我注意到我们网站页面上 header 图片的高度被裁剪了，但裁剪量取决于浏览器和页面。
我们所有的 header 图片都是在调整为 2000 X 1252 像素后上传的（不要问，这是历史），所有缩略图都是 header 图片的四分之一大小的副本（ 500 X 313)
可以在我们的主页上看到精选的缩略图 nataal.com
稍微向下滚动。
目前第一个是 "MUZI" 并且此缩略图已正确呈现。单击缩略图会将您带到文章的页面。在 MS Edge 中查看它会显示整个宽度和大部分图像。从底部边缘裁剪掉大约 15%。在 Firefox 中，裁剪得更多，大约 40%。我认为根本不应该裁剪图像。
我试过使用 Firefox 元素检查器，但高度显示为灰色，并且没有关于它是如何计算的或可能涉及的内容的信息 css。
我很高兴在 "Advanced" 选项卡中插入一些 javascript 或 css 或调整站点 css 文件，但这个让我击败了。这是 Squarespace 的另一个 "feechur"，还是我在做一些非常愚蠢的事情？
这是在 Firefox 上的 Squarespace 编辑器 运行 中看到的图像，请注意它没有被裁剪
单击左上角的对角箭头隐藏 LH 导航并展开图片全屏，还是没有裁剪。
如 MS Edge 中所见
如在 Firefox 中所见
以上所有屏幕截图均来自同一台 PC 上的同一台显示器 运行 Windows 10
在主页上，不同类型的页面，header 图片没有被裁剪。
我怀疑这里有两个因素：
浏览器之间的差异可能是由于 A) 浏览器之间的缩放级别设置不同或 B) 浏览器之间的字体渲染（因为图像的高度基于页眉中的文本）。使用键盘快捷键 CTRL+0 重置每个浏览器中的缩放级别，以确保这不是一个因素。如果那不能解决问题，可能 font-related.
页眉中使用了有问题的图像，页眉使用 Squarespace 的 "ImageLoader" 缩放图像以填充 space，基于 text/font 大小和文本周围的 padding/margin。这是 Squarespace 的一项功能，您可以通过更改浏览器宽度并观察图像的可视部分随之变化来查看它的实际效果。要记住的关键是，在这样的 "responsive" 设计中，没有 one-single 图像大小。图片必须根据 device/browser 大小缩放和更改宽高比。
您可以在 Squarespace's own help page about responsive design 上阅读有关第 2 点的更多信息。下面是一个示例，说明图像的可见部分必须如何更改才能保持页面的整体美感和文本的可读性：
目前，Squarespace 不提供任何基于 "art direction" 的图像选项。也就是说，目前无法为移动设备和桌面设备指定特定图像，例如，尽管在某些情况下它可以是 "faked" 和 Javascript and/or CSS。
如果要修改图片的高度，必须改为修改图片高度所依据的内容的高度。图像的高度基于 "MUZI Words Binwe Adebayo" 文本。图像设置为填充这些文字所占区域的背景。
例如，您可以通过以下方式将图像设置为至少浏览器视口的高度：
.title-desc-wrapper.has-main-image {
min-height: 100vh;
}
如果这不是您想要的效果，您可以为 inner-description 元素指定自己的 top/bottom 填充，如下所示：
.title--description-position-over-image.title--description-alignment-center .title-desc-inner {
padding-top: 280px; /* or 20vw or whatever you like... */
padding-bottom: 280px;
}
您当然可以使用这些值。
你看到的是图像的高度与文本的高度相关，因此通过调整文本描述的高度（通过填充、min-height 或其他属性），图片高度调整（因为ImageLoader设置为根据文字设置图片大小）。
就您可以设置什么值来获得您想要的外观而言，可能性是无限的。但只要您牢记应该调整 text/description 的高度，您就会取得更大的成功。
请记住，可能需要使用 media queries and/or !important 将 text/image 的高度设置为您喜欢的每个 width/breakpoint .这就是为什么在 Squarespace 中特别关注图像 cropping/aspect-ratio 非常耗时（在某种程度上通常是响应式设计）：很难准确知道文本的大小在每台设备上的每个操作系统上的每个浏览器的每个版本上。