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

flexible header that keeps aspect ratio of logo image

本文关键字：图像 标题      更新时间：2023-09-26

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

我需要徽标图像来保持标题的高度而不是缩小。

时间轴

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

我

尝试了不同的解决方案，但似乎没有一个对我有用。现在可能是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/ - 在这里，时间轴标题运行良好。

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

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

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

相关文章：