如何实现导航栏品牌logo图片的响应式自适应缩放

问题根因排查 #

• 你给.navbar-brand img设置了固定高度height: 132px，固定高度优先级高于height: auto，会强制图片高度不变，宽度也会跟着保持原比例锁死，自然不会响应缩放
• 移动端断点里的max-height: 132x存在语法错误，少了px单位，这条规则直接失效
• 大屏下.header-navbar-top-left被设置了固定max-width: 42%+flex: 0 0 42%，父容器宽度被锁死的情况下，内部图片的max-width:100%只能基于这个固定父宽计算，无法跟着视口自由缩放

修复方案 #

要保留logo原始734px*132px的最大尺寸，同时实现响应式缩放，修改你的SCSS代码如下：

.navbar-brand {
    color: $primary;
    padding: 0;
    // 给父容器加最大宽度，限制logo最大尺寸就是原始尺寸
    max-width: 734px;
    width: 100%;

    img {
        max-width: 100%;
        // 去掉固定height，改成auto，保证宽高比
        height: auto;
        max-height: 132px;

        @include media-breakpoint-down(md) {
            // 修复单位错误，移动端如果需要缩小logo高度可以改小数值，比如80px
            max-height: 132px;
        }
    }
}

@include media-breakpoint-up(md) {
    .header-navbar-top-right-search {
        margin-left: auto;
    }
}

@include media-breakpoint-up(lg) {
    .header-navbar-top-left {
        // 去掉固定42%宽度限制，改成自适应，要保留布局比例的话可以改成min-width，不要用flex:0 0锁死
        max-width: fit-content;
        flex: 1 1 auto;
    }

    .header-navbar-top-center {
        max-width: 16%;
        flex: 0 0 16%;
    }

    .header-navbar-top-right-search {
        flex: 0 0 auto;
    }

    .header-navbar-top-right {
        flex: 0 0 auto;
    }
}

.header-top-line {
    background-color: $section-bg;

    a:not(.edit-link) {
        padding: 22px $spacer 20px;
        font-size: 0.8125rem;
        line-height: 1.125rem;
    }

    .login-list > .nav-item a {
        font-weight: 700;
    }
}

.header-bottom-line {
    background-color: $white;
}

.header-quantity-box {
    margin-left: $spacer * 0.25;
}

.nav-link,
.search-module .btn,
.header-navbar a {
    color: $white;

    &:active,
    &:hover {
        color: $primary;
    }
}

额外排查项 #

如果修改后还是不生效，按顺序检查：

• 用浏览器F12元素检查器看img的样式面板，确认是否有更高优先级的规则覆盖了你写的img样式，被划掉的规则就是被覆盖的
• 确认img标签没有写行内的width、height属性，行内样式优先级高于外部样式
• Bootstrap的img-fluid本质就是max-width:100%; height:auto，只要没有其他规则覆盖，加了之后就会生效

内容的提问来源于stack exchange，提问作者Roxána Sipeki