html - 如何将图像尺寸限制在其父 div 内？

Question

我正在尝试将“Nelson Mazda”png 设置为适合导航栏的限制，但它显示的比导航栏大，如您在屏幕截图中所见。我尝试将 .brand-logo 的 max-height 和 max-width 设置为 100%，但这似乎没有解决它。我错过了什么？

注意:nav-wrapper 设置为与导航栏相同的高度，因此将 .brand-logo 的高度设置为它的 100% 理论上应该可行，对吧？

HTML:

 <!-- Navigation bar -->
    <div class="navbar-fixed" id="nav">
        <nav>
            <div class="nav-wrapper">
                <!-- Site name -->
                <a href="/" class="brand-logo"><span class="tighter"><img src="images/NelsonMazdaLogo.png"></a>
            </div>
        </nav>
    </div>

CSS:

nav {
    background-color: rgba(255, 255, 255, .95);

    .brand-logo,
    ul a {
        color: $black;
        padding: 0 15px;
    }

    .brand-logo {
        font-weight: 400;
        letter-spacing: -2px;
        height: 100%;
        max-width: 100%;

        .tighter {
            letter-spacing: -3px;
        }
    }
}

Answer 1

在 img 本身上设置 max-height 和 max-width

.brand-logo img {
    max-height:100%;
    max-width:100%;
}