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

【问题标题】：Resizing Squarespace header image container doesn't resize image inside调整 Squarespace 标题图像容器的大小不会调整内部图像的大小
【发布时间】：2016-11-18 21:49:44
【问题描述】：

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

这种类型很臭，并不是特定于这个特定模板的。我很想知道如何使视频/图像具有响应性。

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

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

【问题讨论】：

标签： css image video css-selectors squarespace

【解决方案1】：

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

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

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

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

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

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

你最终会得到如下所示的东西：

【讨论】：

【解决方案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 之一与页面宽度相同，并居中。

【讨论】：

【解决方案3】：

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

【讨论】：

【解决方案4】：

你需要附加这个样式：

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

【讨论】：

调整容器大小而不是图像。