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

Question

我正在设置“Nelson Mazda”png以适应导航栏的限制，但它显示的大于导航栏，如屏幕截图所示。我尝试将max-height的{​​{1}}和max-width设置为100％，但这似乎并没有解决它。我错过了什么？

注意：.brand-logo设置为与导航栏相同的高度，因此将nav-wrapper的高度设置为100％理论上应该可以正常工作，对吗？

HTML：

.brand-logo

CSS：

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

Answer 1

在max-height本身

上设置max-width和img

.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%;