使元素填充 div 的其余部分而不调整图像大小

Question

我希望此导航栏中的徽标图像填充其高度，同时仍保持其纵横比。剩余的宽度应该由 ul 元素填充。
只要 ul 元素的宽度不是 100%，图像就会正确显示。

http://jsfiddle.net/5o0b4xLd/

我该怎么做？

代码：

<div id="navbar">
<div id="logoBox">
    <img src="http://i.imgur.com/wuRN2wD.png" id="logo">
</div>
<ul>
    <li>
        <a href="#fakelink">
            Item 1
        </a>
    </li>
    <li>
        <a href="#fakelink">
            Item 2
        </a>
    </li>
    <li>
        <a href="#fakelink">
            Item 3
        </a>
    </li>
    <li>
        <a href="#fakelink">
            Item 4
        </a>
    </li>
    <li>
        <a href="#fakelink">
            Item 5
        </a>
    </li>
</ul>

#navbar {
    display: flex;
    width: 80%;
    height: 3.8em;
    margin-top: 4em;
    margin-left: auto;
    margin-right: auto;
    background: #f39c12;
}

#logoBox {
    display: inline-block;
    *display: inline;
    height: 100%;
    float: left;
    margin-left: 1%;
}

#logo {
    max-height: 100%;
    max-width: 100%;
}

#navbar ul {
    display: inline-block;
    white-space: nowrap;
    vertical-align: top;
    overflow: hidden;
    width: 100%;
    height: 100%;
    right: 0;
    margin: 0;
    padding: 0;
}

#navbar li {
    display: inline-block;
    padding-left: 4%;
    margin-top: 1.9em;
    line-height: 0;
}

#navbar a {
    color: #FFFFFF;
    text-decoration: none;
    font-size: 1.25em;
}

Answer 1

您当前的问题在于 #logo 属性 - max-width 和 max-height 实际上不会展开 div，除非里面有内容迫使它展开。此外，您还需要设置 background-size = cover 以保持纵横比。

试试这个：

#logo { max-height: 100%; height: 100%; background-size: cover; }

Answer 2

在此处编辑您的 CSS，如下所示： 我添加了背景图像和背景大小以通过宽度缩放图像。还隐藏实际图像以使其只是一个占位符，其余代码都可以。

#logoBox {
    display: inline-block;
    *display: inline;
    height: 100%;
    float: left;
    margin-left: 1%;
    background:url(http://i.imgur.com/wuRN2wD.png) no-repeat;
    background-size:cover;
}

#logo {
    max-height: 100%;
    max-width: 100%;
    visibility:hidden;
}