在保持高寬寬高比的同時伸展內嵌框架以適應寬度（tumblr主題）

我遇到了tumblr cutom主題創建者的問題。例如，在添加視頻帖子時，他們將其放入具有設定寬度和高度的iframe中。我可以使用iframe的寬度進行重置，視頻將相應地展開，但高度保持不變（如預期的那樣）。在保持高寬寬高比的同時伸展內嵌框架以適應寬度（tumblr主題）

但是，當我將高度設置爲auto時，它會擠壓成一個小矩形，而不是假設其正常的寬高比（正如我以爲會那樣）。有沒有辦法讓iframe在iframe中保持爲它設置的比例，但是用CSS來擴大/縮小它？ JQuery也可以，但CSS是首選。

HTML

<div class="video"> 
    {VideoEmbed} // tumblr replaces this with an iframe containing the video 
</div>

CSS（不工作）

.video iframe { 
    height: auto // not working (as in, not producing desired effect) 
    width: 700px // working 
}

來源

2015-10-05 Thomas Wood

您可以通過使用一個簡單的CSS填充伎倆保持率。你需要包裝的iframe在一個容器元素，設置樣式像這樣：

/*span*/.iframe-wrapper { 
 
\t width: 50%; 
 
\t height: 0; 
 
\t padding: 40% 0 0; 
 
\t display: block; 
 
\t position: relative; 
 
\t border: 5px solid blue; 
 
} 
 

 
\t 
 
/*span*/.iframe-wrapper iframe { 
 
    position: absolute; 
 
    top: 0; 
 
    right: 0; 
 
    bottom: 0; 
 
    left: 0; 
 
    max-width: 100%; 
 
    max-height: 100%; 
 
}

<span class='iframe-wrapper'> 
 
    <iframe width="560" height="315" src="https://www.youtube.com/embed/XdlmoLAbbiQ" frameborder="0" allowfullscreen></iframe> 
 
</span>

基本上，你設置寬度你想要的是，然後添加填充到容器保持高寬比。

來源

2015-10-05 18:44:41

現在它是正確的比例，但它不是帖子的全長;這是一半，我認爲（從「寬度：50％」）。我現在如何將其拉伸至100％，仍保持比例？ –

此外，這似乎沒有工作。初始高度和寬度均爲500px，因此比例爲1：1，但新的iframe未按1：1的比例縮放;寬度和高度是不同的。 –

我想我根據你的建議找到了答案。我還沒有用一些非方塊測試它，但我將「min-width」和「min-height」都改爲「width」和「height」，並將iframe-wrapper改爲「width：100％「和」填充：100％0 0「//編輯：不，這總是導致方形iframe，我的壞。 –

在保持高寬寬高比的同時伸展內嵌框架以適應寬度（tumblr主題）

回答

相關問題