Filling a div with an image tag is not working when a large max-height is set

Question

I am trying to get a <img> to expand to fill the height of its parent, using max-height. This image will act as a banner image.

My problem is that if a larger height is set, the image does not fill it completely, maintaining its aspect ratio.

https://jsfiddle.net/f5bpz16r/2/

body {
  width: 100%;
  margin:0;
  padding:0;
}

nav {
  width: 155px;
  height: 100%;
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  z-index: 10;
  border-left: 1px solid #000
}

  nav > .nav-area {
    width: 155px;
    height: 100%;
    position: relative;
  }

    nav > .nav-area > a.logo {
      position: absolute;
      top: 100px;
      left: 15px;
      -webkit-transform: rotate(-90deg);
      -ms-transform: rotate(-90deg);
      transform: rotate(-90deg);
      height: 80px;
      width: 187px;
    }

.wrap {
  margin-right: 155px;
}

.wrap .inner-wrap {
    padding: 45px 55px 0 55px
}

header > .small, 
header > .medium,
header > .large, 
header > .x-large {
  overflow:hidden
}

header img {
  width:100%
}

header > .small {
  max-height: 377px
}

header > .medium {
  max-height: 532px
}

header > .large {
  max-height: 884px
}

header > .x-large {
  max-height: 1082px
}

<div id="container">
<nav>
    <div class="nav-area">
        <a class="logo" href="/">
     LOGO
        </a>
    </div>
</nav>
        <div class="wrap">
            <header>
                <div class="large">
                    <img src="https://static.pexels.com/photos/461775/pexels-photo-461775.jpeg" alt=""/>
                </div>
            </header>
            <main>
                <div class="inner-wrap">
                    Wrap
                </div>
            </main>
        </div>
    </div>

The <img> is plenty big enough. At 4000px high.

Probably the same as this [Force an image to fit and keep aspect ratio](https://stackoverflow.com/q/34713763/483779) — Stickers, Jan 21 '18 at 21:59
@Pangloss object-fit has bad support across browsers does it not? — cmp, Jan 21 '18 at 22:09
Well, yes if you care about IE, your have other options like using JS or background image. — Stickers, Jan 21 '18 at 22:13

Sébastien · Answer 1 · 2018-01-21T22:19:55.570

0

If you mean that there are always a few pixels below the image, it is because images have a display property of inline by default. Change it to block:

header img {
  width:100%;
  display: block;
}

The height of inline elements is affected by the line-height, which accounts for text with descending characters, like 'p', 'j', 'q', etc.

If what you want is to make the image take as much space as allowed by it container you could use

header img {
  object-fit: cover;
}

However I think you would have more control by using the image as a background-image on the header. Then you could use the background-size CSS property.

edited Jan 21 '18 at 22:19

answered Jan 21 '18 at 22:00

Sébastien

11,860
11
58
78

Thanks. I am afraid this has no change. – cmp Jan 21 '18 at 22:08
I was not sure whether this was actually your problem... So what you want it for the image to fill up the header? – Sébastien Jan 21 '18 at 22:10

score 0 · Answer 2 · edited Jan 22 '18 at 06:48

0

maybe this helps

<img style="display:block; height:100%">

edited Jan 22 '18 at 06:48

VXp

11,598
6
31
46

answered Jan 21 '18 at 22:00

MGH

169
4
10

Filling a div with an image tag is not working when a large max-height is set

2 Answers2