CODEWITHSUNDEEP
htmlcss
wegelagerer
wegelagerer

Reputation: 3710

Image doesn't cover DIV

I have a strange problem with an IMG element which doesn't cover the DIV element as it should. As you can see at the bottom, there is a strange padding at the bottom between the image and the DIV surrounding it. I intentionally colored the background red so that's easier to see that padding.

If you check the CSS, it seems that for some reason the IMG doesn't extend it's height to the fullest or that outer DIV gets couple of extra pixels somewhere.

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 (unnecessary code omitted)

#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 with the full code

Upvotes: 0

Views: 431

Answers (2)

Jonathan Z&#250;&#241;iga
Jonathan Z&#250;&#241;iga

Reputation: 645

Add the property display in the last class.

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

Upvotes: 2

Nerdben
Nerdben

Reputation: 68

Add vertical-align to the image.

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

Upvotes: 2

Related Questions