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

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

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

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

此调整视频容器，但视频或图像不会调整其大小。

来源

2016-11-08 Evan Lemmons

的问题是，你的元素继承了以下内容：

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

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

根据您在.title-desc-wrapper元素上对height: 55vh !important的使用，我只能假设您想让您的元素具有55vh的高度。为了实现这一目标只是：

从元素重置min-height到初始。
将55vh的height添加到您的元素中。

现在取决于你是否想这显示背后的<header>网页或没有，你需要用你的<header>（使用calc(55vh + ...)）的高度，要么抵消你元素的高度或调整top属性推送元素下降，这样不再发生。

你的东西，看起来像这样结束：

来源

2016-11-18 13:08:35

您需要添加这种风格：

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

来源

2016-11-14 12:57:08 emtei

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

你的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之一，并居中。

来源

2016-11-16 02:44:01 Darvanen

使用“IFRAME＃vimeoplayer”作为作为选择添加自己的CSS来影响视频缩放..谢谢

来源

2016-11-17 12:35:13

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

回答

相关问题