图像不包括DIV

时间:2016-01-06 20:24:16

标签: html css

我对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包含完整代码

2 个答案:

答案 0 :(得分:2)

为图像添加垂直对齐。

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

答案 1 :(得分: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%;
}