Html 如何将img维度限制为其父div？

我试图将“Nelson Mazda”png设置在导航栏的限制范围内，但它显示的比导航栏大，如屏幕截图所示。我尝试将

.brand logo

的

max height

和

max width

设置为100%，但这似乎无法解决问题。我错过了什么

注意：

nav wrapper

被设置为与导航栏相同的高度，因此将

品牌徽标的高度设置为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>

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;
        }
    }
}

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

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

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

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

您的外部导航必须具有高度或宽度

参见以下示例：

另外，您还有一个未关闭的随机跨度标记

 <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"></span><!-- missing closing span tag -->
                </a>
            </div>
        </nav>
    </div>

您的外部导航必须具有高度或宽度

参见以下示例：

另外，您还有一个未关闭的随机跨度标记

 <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"></span><!-- missing closing span tag -->
                </a>
            </div>
        </nav>
    </div>

仅供参考，这看起来不像是有效的
css
。假设其
scss
？此外，您的html无效：
span
标记未关闭。请删除字体大小和字母间距，因为代码段中此元素中没有文本。还要将高度添加到父对象，然后将图像固定为仅父对象的高度。如果在图像上也设置了宽度，则高宽比可能会影响渲染图像。仅供参考，这看起来不是有效的
css
。假设其
scss
？此外，您的html无效：
span
标记未关闭。请删除字体大小和字母间距，因为代码段中此元素中没有文本。还要将高度添加到父对象，然后将图像固定为仅父对象的高度。如果在图像上也设置了宽度，则纵横比会影响渲染图像的效果。