Question

我一直在努力修复我正在研究的网站上的主要网格。我的目标是尽可能少地进行媒体查询。

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

对于时间轴标题基本相同，但是这个还需要保持时间轴的宽度。

我尝试了不同的解决方案，但似乎没有一个对我有用。这可能是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/ - 这里的Timeline-Header工作得很好。

Answer 1

要保持标题图像的高度，您可以在标题和标题图像上使用7.9vh（视口高度）作为高度

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

小提琴：https://jsfiddle.net/Ullvieib/ty4exd83/

灵活的标题，保持徽标图像的宽高比

1 个答案: