響應水平div高度不匹配與youtube嵌入

我有兩個水平div保持相同的高度一些問題。如果兩者都包含圖像就沒有問題，但只要我嘗試在其中一個div中嵌入YouTube視頻，隨着視口減小，高度開始不匹配。響應水平div高度不匹配與youtube嵌入

使用的代碼是這樣的：

<div class="IndexBanners"> 
<div class="bannerimages effect first"> 
<iframe class="embed-responsive-item" frameborder="0" src="https://www.youtube.com/embed/GfaiXgY114U" height="99%" width="100%"> 
</iframe> 
</div> 

<div class="bannerimages effect"> 
<a href="http://placehold.it"><img src="http://placehold.it/795x436"></a> 
</div> 
</div>

我已經成立了一個小提琴，所以你可以看到這個問題。 https://jsfiddle.net/grvbc42o/1/

有什麼建議嗎？

來源

2017-05-26 Steve Price

默認情況下，圖像垂直對齊baseline，並且會在父級的底部留出一點空間。如果你給圖像vertical-align和視頻的改變高度100%，他們正確對齊。

.IndexBanners { 
 
    display: flex; 
 
    margin-top: 20px; 
 
} 
 

 
.bannerimages { 
 
    flex: 1 0 0; 
 
} 
 

 
img { 
 
    max-width: 100%; 
 
    height: auto; 
 
    vertical-align: top; 
 
} 
 

 
@media (max-width:600px) { 
 
    .IndexBanners { 
 
    display: block; 
 
    } 
 
    .first { 
 
    position: relative; 
 
    padding-bottom: 56.25%; 
 
    height: 0; 
 
    } 
 
    .first iframe { 
 
    position: absolute; 
 
    top: 0; 
 
    left: 0; 
 
    width: 100%; 
 
    height: 100%; 
 
    } 
 
}

<div class="IndexBanners"> 
 
    <div class="bannerimages effect first"> 
 
    <iframe class="embed-responsive-item" frameborder="0" src="https://www.youtube.com/embed/GfaiXgY114U" height="100%" width="100%"></iframe> 
 
    <!--a href="http://placehold.it"><img src="http://placehold.it/795x436"></a--> 
 
    </div> 
 
    <div class="bannerimages effect"> 
 
    <a href="http://placehold.it"><img src="http://placehold.it/795x436"></a> 
 
    </div> 
 
</div>

來源

2017-05-26 15:12:52

完美的作品。感謝您對基線的解釋。有一件令我感到困惑的事情是，爲什麼視頻高度一旦達到600px寬就很小。縱橫比變化很大。 –

@StevePrice更新了我的答案，但這超出了您的問題範圍。如果這是問題的一部分，一定要在問題中加上這個問題 - 理想情況下當你第一次問問時，這樣人們不會回答，如果他們不知道。 –

可卡，它不是問題的一部分，因爲我沒有注意到它，直到我減少視口看你的原始解決方案。感謝您的更新，儘可能無縫地與您的原始答案一樣。 –

是爲圖像定義的高度。我會建議加入

style="height: 99% width=100%"

在您的標籤。

如果這不起作用，我會建議給iframe和img標籤一個共同的類，並在類中定義所需的高度和寬度。（並刪除iframe標記中的高度和寬度讓我知道這些問題是否都不會解決您的問題

來源

2017-05-26 15:06:14

網站廣泛，圖像給出img最大寬度：100％; 身高：自動; } –

的絕對是這裏的問題。他們是當試圖讓他們做出反應時，這是一個與之合作的熊。寬度很容易，高度通常不是。

繼Intrinsic Ratio technique discussed by Ben Marshall後，我在這裏編輯了你的小提琴：https://jsfiddle.net/grvbc42o/3/。這似乎很能達到你的目標。

來源

2017-05-26 15:19:57 TXChetG

沒有。兩個div不再水平對齊。應該只有堆疊在600px以下 –

是的...鏈接錯誤的小提琴版本.https：//jsfiddle.net/grvbc42o/9/ – TXChetG

響應水平div高度不匹配與youtube嵌入

回答

相關問題