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

图像不包括DIV

2 个答案: