靈活的標題，保持標誌圖像的縱橫比

Question

我一直在嘗試修復我正在處理的網站上的主要網格。 我的目標是讓儘可能少的媒體查詢。

我需要徽標圖像來保持標題的高度，而不是縮小。

對於時間軸標題基本上是一樣的，但是這個也需要保持時間軸的寬度。

我嘗試了不同的解決方案，但似乎沒有一個適合我。可能這是js的時間嗎？ （調整大小）

$(window).resize(function() { 
    var windowHeight = $(window).height(); 
    var headerHeight = $('div#header').outerHeight(true) 
    var footerHeight = $('div#footer').outerHeight(true); 

    var contentHeight = windowHeight - (footerHeight + headerHeight); 
    var contentMargins = $('div#content').outerHeight(true) - $('div#content').height(); 
    var contentInnerHeight = contentHeight - contentMargins; 

    $('div#content').height(contentInnerHeight); 
}).resize(); 

所以，如果有人知道的東西，那會超級棒。 :)

我上傳的基本電網這裏提琴：https://jsfiddle.net/hansgohr/62xLfewa/

也是「滿」的網站可以在這裏看到：http://ocv-2300.net/scrollmagic/ - 這裏的時間軸標頭工作得很好。

Answer 1

爲了保持你可以在標題和標題圖片

.logo-space img{ 
    height:7.9vh; 
} 

小提琴都使用7.9vh（視高度）爲高度頭圖像的高度：https://jsfiddle.net/Ullvieib/ty4exd83/