Сделать элемент заполнить остаток 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; 
}