动态缩小标题 - 文本和图像

Question

我试图找到一个动态调整标题高度以及徽标图像内容的代码示例，就像您在此处访问一样

http://www.kriesi.at/legal-information

我见过像这样的例子

http://callmenick.com/post/animated-resizing-header-on-scroll

它改变了高度和字体大小，并且我已经成功地使用了样本，但他们并没有在标题中包含图像，这就是我在努力学习的方面。

由于

Answer 1

要缩小徽标，可以在图像上设置不同的最大高度。这类似于更改字体大小，而只是更改最大高度。

您的代码可能类似于：

header nav img {
    max-height: 88px;
}
header.smaller nav img {
    max-height: 44px;
}

请注意，这会改变导航中所有图像的大小，因此如果导航中的图像不是徽标，则可能需要更具体的选择器。