img { max-height: 100%; } causes img to exceed bounds

Question

Is this a Chrome bug?

Here's the HTML:

<div><img src="test.png"></div>

Here's the CSS:

* { box-sizing: border-box; }
div { height: 200px; padding: 75px 0 60px; }
img { max-height: 100%; }

Expected result: The img should have a height of 65px.

Result in Chrome (v. 27.0.1453.116) on Mac OS (v. 10.6.8): The img has height of 135px and "bleeds" into the parent div's padding. If I change the padding of the div to 50px 0, oddly it renders properly.

Play with this in a codepen: http://codepen.io/anon/pen/jhbKz

Screenshots:

First block has padding of 50px 0. Second block has padding of 75px 0 60px.

Firefox (correct result)

Firefox

Chrome (wrong?)

Chrome

does the CodeOpen you added show the issue ? on my chrome didn't see any different with images height or width — Muath, Jun 26 '13 at 19:51
yes, the CodePen shows the issue on my version of Chrome on Mac. The first image renders as expected (height of 100px inside the parent div, which has 50px padding on top and bottom). The second image does not render as expected: it should have a height of 65px, but instead has a height of 135px and bleeds into the parent div's padding bottom. — charles, Jun 26 '13 at 20:05
What about a CSS `height: 100%;` problem? Why not have a look @ **[this](http://stackoverflow.com/questions/6534156/css-height-100-issue)** and **[these](http://stackoverflow.com/search?q=CSS+height+100%25)**. And yes, in my Chrome in Windows shows the same problem in CodePen. :( — Mayeenul Islam, Jun 27 '13 at 04:10
In case you haven't noticed this yet, the image B height ends up being equal to the `padding-top` + `padding-bottom` of `div.b`. Very strange...I would go with @Pav's answer. — Rob Kovacs, Jul 02 '13 at 14:10

score 6 · Accepted Answer · answered Jun 27 '13 at 10:44

6

Try adding a container to your Image with width and height of 100%. This will give you the same output on chrome and FF.

<div class="b">
    <div style='height:100%;width:100%;'>
        <img src="some image url">
    </div>
</div>

I cannot explain why this fix works currently, but I myself am trying to reason with it.

answered Jun 27 '13 at 10:44

Pav

1,156
1
7
10

1

I don't think you need `width: 100%` in this case...otherwise good answer. – Rob Kovacs Jul 02 '13 at 14:12
Seems this bug only exists in Chrome. No problems in Safari (v. 5.1.9) or Opera (v. 12.15) either. – charles Jul 03 '13 at 02:25

Ralf · Answer 2 · 2018-12-21T08:41:54.093

Years later, the issue seems to have spread to Firefox. Pav's workaround did not work for me, maybe because I have "a" not "div". The only way in my case was to display as table:

<div style="display: table;">
<a style="height: 100px; display: table-cell;" href="#">
    <img style="max-height: 100%; width: auto;" src="some image url">
</a></div>

An additional benefit of "table" is that vertical-align: middle; can be used to center the image (or other content) vertically.

Pavel Laptev · Answer 3 · 2022-08-16T21:17:52.517

You can achieve it using position: absolute for your image.

<div class="wrap">
  <img class="img" src="https://cdn.photoswipe.com/photoswipe-demo-images/photos/1/img-2500.jpg" alt="">
</div>

body {
  height: 100vh;
}

.wrap {
  display: inline-block;
  position: relative;
  max-height: 500px;
  height: 100%;
  width: 100%;
  background: rgba(0,0,0,0.1);
}

.img {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  height: 100%;
}

jsfiddle

img { max-height: 100%; } causes img to exceed bounds

3 Answers3