Изображение не распространяется на DIV

Question

У меня странная проблема с элементом IMG, который не покрывает элемент DIV, как он должен. Как вы можете видеть внизу, есть странное дополнение внизу изображения и DIV, окружающих его. Я намеренно покрасил фон красным цветом, так что легче увидеть это дополнение.

Если вы проверили CSS, кажется, что по какой-то причине IMG не расширяет его высоту до самого полного, или что внешний DIV получает пару дополнительных пикселей где-то.

HTML

<div id="category-list-wrapper" class="sixteen columns"> 
    <div class="list-item-outer-wrapper"> 
    <div class="list-item-inner-wrapper"> 
     <div class="list-item-overlay-outer-wrapper"> 
     <div class="list-item-overlay-inner-wrapper"></div> 
     <div class="list-item-name-wrapper"> 
      <h1 class="list-item-name">Test</h1> 
     </div> 
     </div> 
     <div class="list-item-photo-wrapper"> 
     <img class="list-item-photo" src="http://lorempixel.com/1600/900/" /> 
     </div> 
    </div> 
    </div> 
</div> 

CSS (ненужный код опущен)

#category-list-wrapper { 
    float: left; 
} 

#category-list-wrapper > .list-item-outer-wrapper { 
    box-sizing: border-box; 
    float: left; 
    margin: 20px 0 0 0; 
    padding: 0 10px; 
} 
#category-list-wrapper > .list-item-outer-wrapper > .list-item-inner-wrapper { 
    height: 100%; 
    position: relative; 
    width: 100%; 
} 

#category-list-wrapper > .list-item-outer-wrapper > .list-item-inner-wrapper > .list-item-overlay-outer-wrapper { 
    opacity: 0; 
    height: 100%; 
    position: absolute; 
    width: 100%; 
} 

#category-list-wrapper > .list-item-outer-wrapper > .list-item-inner-wrapper > .list-item-overlay-outer-wrapper:hover { 
    opacity: 1; 
} 

#category-list-wrapper > .list-item-outer-wrapper > .list-item-inner-wrapper > .list-item-overlay-outer-wrapper > .list-item-overlay-inner-wrapper { 
    height: 100%; 
    position: absolute; 
    width: 100%; 
    z-index: 1; 
} 

#category-list-wrapper > .list-item-outer-wrapper > .list-item-inner-wrapper > .list-item-overlay-outer-wrapper > .list-item-name-wrapper { 
    position: relative; 
    pointer-events: none; 
    top: 50%; 
    transform: translateY(-50%); 
    z-index: 2; 
} 

#category-list-wrapper > .list-item-outer-wrapper > .list-item-inner-wrapper .list-item-photo-wrapper { 
    height: 100%; 
    width: 100%; 
    background-color:red; 
} 

#category-list-wrapper > .list-item-outer-wrapper > .list-item-inner-wrapper .list-item-photo-wrapper > .list-item-photo { 
    height: 100%; 
    width: 100%; 
} 

JSFiddle с полным кодом

Answer 1

Добавить вертикальное выравнивание к изображению.

#category-list-wrapper > .list-item-outer-wrapper > .list-item-inner-wrapper .list-item-photo-wrapper > .list-item-photo { 
    height: 100%; 
    width: 100%; 
    vertical-align:top; 
} 

Answer 2

Добавить объект display в последнем классе.

#category-list-wrapper > .list-item-outer-wrapper > .list-item-inner-wrapper .list-item-photo-wrapper > .list-item-photo { 
    display: block; 
    height: 100%; 
    width: 100%; 
}