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

Question

我注意到当我尝试在Squarespace上调整标题图片或视频的容器大小时，它并没有调整其内部的视频或图像的大小。例如，在https://forgwinnett.org上，视频看起来只占用了一半的着陆屏幕，但实际上并非如此 - 视频仍以100％的视图宽度和高度呈现，但我还是掩盖了一半。

这种臭味并不特定于此特定模板。我很想知道如何使视频/图像响应。

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

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

Answer 1

您的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 2

使用＆＃34; iframe＃vimeoplayer＆＃34; 作为选择器添加您自己的css以影响视频大小调整..谢谢

Answer 3

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

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

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

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

1. 将min-height元素从<iframe>元素重置为 initial 。
2. 向height元素添加<iframe> 55vh。

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

你最终会得到这样的东西：

Answer 4

您需要添加此样式：

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