灵活的标题，保持标志图像的纵横比

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/