调整 Squarespace header 图像容器不会调整内部图像的大小

Question

我注意到，当我尝试在 Squarespace 上调整 header 图像或视频的容器大小时，它不会调整其中的视频或图像的大小。例如，在 https://forgwinnett.org 上，视频似乎只占据了登录屏幕的一半，但实际上并非如此 - 视频仍以 100% 的视图宽度和高度呈现，但我覆盖了一半。

这种方式很糟糕，并非特定于此特定模板。我很想知道如何使 video/image 响应。

div[data-url-id="pledge"] div.title-desc-wrapper.over-image.has-main-image.has-background-video {
    height: 55vh;
}

这会调整视频容器的大小，但视频或图像不会随之调整大小。

Answer 1

您需要附加此样式：

.sqs-video-background {
    height: 61vh;
}

Answer 2

您的 iframe 设置为特定宽度：

<iframe id="vimeoplayer" class="background-video ready" src="//player.vimeo.com/video/181653249?api=1&amp;background=1" style="width: 2640px; height: 990px; left: -729px; top: 0px;"></iframe>

注意style="width: 2640px; height: 990px; left: -729px; top: 0px;"

我注意到 left 的值会随着屏幕尺寸的变化而变化，以使 iframe 在内容下方居中。

您需要：

使 iframe 与页面宽度相同（自动），或者
使 iframe 和视频之间的父 div 之一与页面宽度相同，并居中。

Answer 3

使用 "iframe#vimeoplayer" 作为选择器来添加您自己的 css 来影响视频大小调整。谢谢

Answer 4

问题是您的 <iframe> 元素继承了以下内容：

.sqs-video-background .background-video {
  min-height: 100%;
  ...
}

这意味着无论您指定什么 height 值，您的 <iframe> 元素的最小高度必须至少为父元素的 100%...它本身是绝对定位的并且height 为 100%，使其填满整个页面。

根据您在 .title-desc-wrapper 元素上使用 height: 55vh !important，我只能假设您希望 <iframe> 元素的高度为 55vh。要做到这一点，只需：

将 <iframe> 元素中的 min-height 重置为 initial。
将 55vh 的 height 添加到您的 <iframe> 元素。

现在，根据您是否希望它显示在页面后面 <header>，您需要将 <iframe> 元素的高度偏移 <header> 的高度（使用 calc(55vh + ...)）或调整 top 属性以将 <iframe> 元素向下推，以便不再发生这种情况。

您最终会得到如下所示的内容：

调整 Squarespace header 图像容器不会调整内部图像的大小

Resizing Squarespace header image container doesn't resize image inside

css

video

image

css-selectors

squarespace