圖片不包含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%;
}