html - 图片不覆盖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;
}