調整大小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標題圖像容器不會調整圖像內的大小

回答

相關問題