Question

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

我该怎么做？

守则：

<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如下：我添加了背景图片＆amp;通过宽度缩放图像的背景大小。同样隐藏实际图像以使其只是占位符，其余代码也可以。

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

在不调整图像大小的情况下使元素填充其余部分

2 个答案: