Shrink Header Image on Scroll

我目前正在本地服务器上使用免费版本的neve，我正在尝试使我的粘性标题基于滚动响应。

文本响应正确且变小，但徽标没有缩小。在javascript函数之外，我可以通过更改开发人员选项中的类来调整它的大小，但不响应滚动。

感谢您的帮助！

附加CSS

.header.shrink {
  font-size: 13px;
  position: fixed; 
    z-index:999999;
  top: 0;
  width: 100%;
  transition: 0.2s;
}

.site-logo.shrink img{
    max-height: 45px;
}

功能。php

<script>
jQuery(document).ready(function($) {
    $(window).scroll(function () {
        if ($(window).scrollTop() > 10) { 
            $(\'header\').addClass(\'shrink\');
        $(\'site-logo\').addClass(\'shrink\');
        }
        else{
            $(\'header\').removeClass(\'shrink\');
        $(\'site-logo\').removeClass(\'shrink\');
        }
    });
});
</script>

样式。css

.site-logo {
  align-items: center;
  display: flex;
  padding: 10px 0;
}

.site-logo amp-img img {
  max-height: 60px;
}

.site-logo .brand {
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.site-logo .title-with-logo {
  display: flex;
  flex-direction: row;
  align-items: center;
}

.site-logo .title-with-logo > img:first-child, .site-logo .title-with-logo > div:first-child {
  margin-right: 10px;
}

.site-logo h1, .site-logo p {
  font-family: inherit;
  font-size: 1.25em;
  margin-bottom: 0;
  font-weight: 600;
}

.site-logo small {
  width: 100%;
  display: block;
}


.site-logo a {
  color: #404248;
  display: inline;
}

.site-logo a:hover {
  color: #404248;
  text-decoration: none;
  opacity: .9;
}

<script> jQuery(document).ready(function($) { $(window).scroll(function () { if ($(window).scrollTop() > 10) { $(\'header\').addClass(\'shrink\'); $(\'site-logo\').addClass(\'shrink\'); } else{ $(\'header\').removeClass(\'shrink\'); $(\'site-logo\').removeClass(\'shrink\'); } }); }); </script>

<script> jQuery(document).ready(function($) { $(window).scroll(function () { if ($(window).scrollTop() > 10) { $(\'.header\').addClass(\'shrink\'); $(\'.site-logo\').addClass(\'shrink\'); } else{ $(\'.header\').removeClass(\'shrink\'); $(\'.site-logo\').removeClass(\'shrink\'); } }); }); </script>

.site-logo img { max-height: 75px; -webkit-transition:max-height 1s ease-out; -moz-transition:max-height 1s ease-out; -o-transition:max-height 1s ease-out; transition:max-height 1s ease-out; } .site-logo.shrink img { max-height: 45px; }

css to fit image by HEIGHT

我试图找到一种方法，通过浏览器窗口不断变化的高度（而不是宽度）来响应图像。因此，当您使浏览器窗口更窄，而不更改（比方说全高）高度时，图像将缩小以适合。但是如果你做相反的事情，使全宽窗口变短，图像将无法缩放，除非它是页面上唯一的东西。有没有办法做到这一点？看见https://www.harryorlyk.com/portfolio/studio-yard/我有一个媒体查询，因此在1024倍时，图像的高度会降低，但我希望能根据浏览器窗口的高度自动改变其高度。我尝试了以下几种变体：.postid-5582 im

相关推荐

css to fit image by HEIGHT