按比例调整图像大小以适合包含div的高度

Question

如何将图像调整为与li高度相同的高度？这是HTML：

<header>
    <nav>
        <ul>
            <li>Home</li>
            <li>About</li>
            <li>Contact</li>
            <li><img src="images/grid.png"></li>
            <li>Sign In</li>
        </ul>
    </nav>
</header>

这就是我为CSS做的事情：

header nav {
    text-align: right;
    margin-right: 22px;
}

header nav ul li { 
    display: inline;
    font-family: Arial;
    padding: 3px;
    margin-right: 6px;
}

header nav ul li img { 
    max-height: 100%;
}

最大高度不起作用。谢谢！

Answer 1

您必须为height明确设置<li>，否则max-height的{​​{1}}将无效。

另外，将<img>的{​​{1}}更改为<li>以允许高度设置。