javascript - 保持 Logo 图像纵横比的灵活标题

Question

我一直在尝试修复我正在处理的网站上的主要网格。我的目标是尽可能少的媒体查询。

我需要 Logo-Image 来保持标题的高度而不是缩小。

Timeline-Header 基本相同，但是这个也需要保持Timeline 的宽度。

我尝试了不同的解决方案，但似乎没有一个适合我。这可能是 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();

因此，如果有人知道一些事情，那就太棒了。 :)

我在这里上传了一个带有基本网格的 fiddle :https://jsfiddle.net/hansgohr/62xLfewa/

“完整”网站也可以在这里看到:http://ocv-2300.net/scrollmagic/ - 这里的 Timeline-Header 工作得很好。

Answer 1

要保持标题图像的高度，您可以使用 7.9vh(视口(viewport)高度)作为标题和标题图像的高度

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

fiddle :https://jsfiddle.net/Ullvieib/ty4exd83/