如何将img尺寸限制为其父div？

Question

我正在尝试将“ Nelson Mazda” png设置为适合导航栏的范围，但是它显示的尺寸大于导航栏，如屏幕截图所示。 我尝试将.brand-logo的max-height和max-width设置为100％，但这似乎无法解决。 我想念什么？

注意： nav-wrapper的高度设置为与navbar相同的高度，因此从理论上将.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%;
}

Answer 2

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

请参阅以下示例： http : //codepen.io/bootstrapped/details/KwYGwq/

.brand-logo {
    height: 50px; /* set to height you want image to be constrained to */
}

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

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

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

要考虑的关键是，当您说100％时，您必须思考，到底是100％是什么？ 它必须位于具有实际高度的父元素或祖父母元素中。

另外，如果您的图像本身未正确裁剪，则可能在徽标周围添加了透明空间。 如果上述解决方案不起作用，请尝试下载图像并对其进行裁剪，以确保将其实际裁剪到徽标边缘。

您也可以尝试object-fit ：

object-fit: contain;
width: 100%;