31

I have an img element inside a liquid div. That img has its max-height set to 100%. So, if the image is taller than the div, it should be rendered as tall as the div.

The original size of the .png file is 200x200. In my browser, the div shows as 284x123. Therefore, the img should be rendered at 123x123, to keep its aspect ratio.

However, the img is breaking the div's bounds and still shows as 200x200. I can't seem to figure why this is happening.

This is happening on Chrome, but not on Firefox (last time I tried).

You can see the current state here (http://paginas.fe.up.pt/~ei07171/test/). If you hover over the left side of the picture, you'll see a grey arrow, the .png that i'm talking about. The arrow on the right side is a SVG file and works correctly.

Edit: I've created a separate jsfiddle (http://jsfiddle.net/dcastro/3Ygwp/1/), where the img's max-height seems to work correctly.. I can't find what on my project is causing it not to work.

dcastro
  • 66,540
  • 21
  • 145
  • 155
  • Could you please post the demo code right here in the question, rather than at an offsite link? – KatieK Aug 05 '13 at 23:31
  • Sorry KatieK, I don't have the code anymore. At the time I posted this, I couldn't isolate the snippet with the problem, that's why I posted a link to the whole project instead of posting a code snippet. – dcastro Aug 06 '13 at 10:53

5 Answers5

64

I figured it out. For an element's max-height to work, one of its parents must have a height attribute defined (apparently in a fixed unit, like px, not in percentage).

From the w3c specs:

The percentage is calculated with respect to the height of the generated box's containing block. If the height of the containing block is not specified explicitly (i.e., it depends on content height), and this element is not absolutely positioned, the percentage value is treated as '0' (for 'min-height') or 'none' (for 'max-height').

Since none of my img's parent have a fixed height defined, I had to limit my img to max-width instead.

Edit: Also, it seems webkit takes the specs a little too literally: https://stackoverflow.com/a/3808701/857807

I used the workaround presented in that thread, and used position: absolute; max-height: 100%; top: 0.

Community
  • 1
  • 1
dcastro
  • 66,540
  • 21
  • 145
  • 155
  • 9
    Sadly, It's not "one of its parents". Seems like it must be the direct parent. otherwise the rule is just being ignored. see http://jsfiddle.net/pscjgcak/ – tsi Apr 23 '18 at 09:55
10

I bumped into this as well and I managed to get a consistent height across different browsers using vh units in CSS, for example max-height: 5vh; as in 5% of the viewport height.

Alex Pop
  • 168
  • 1
  • 6
2

If you still want the container to be % based and not px, you can make the container display: flex, and the image

object-fit: contain;
max-width: 100%;
doron
  • 251
  • 4
  • 12
0

Try adding the width and height attributes to your img's

Also set the natural dimensions in your HTML to help the browser render.

HTML

<img src="img/mywine/2high.png" width="123px" height="123px">

CSS 

  img{
       max-width: 100%
       height: auto;
    }
Matt Steele
  • 659
  • 3
  • 10
  • That wasn't the picture I was talking about.. I meant the grey arrow that appears when you hover on the left side.. Still, I tried adding the height and width attributes on the HTML, and setting width to auto on css, but it didn't work. – dcastro Jan 28 '13 at 03:33
  • The problem must be elsewhere on my DOM, since the same div/img configuration works on a jsfiddle (which I've attached to my edited post). – dcastro Jan 28 '13 at 03:34
  • I think you're fighting a specificity war with all those ID's. I think using classes instead would prevent the issue. I'm working on it. – Matt Steele Jan 28 '13 at 03:50
  • 'png-container' has a position:relative on it that I don't think needs to be there. I think you could remove the
    that it's attached to as well. A lot of div's within div's in the mark-up and heavy use of ID's will get you.
     – Matt Steele Jan 28 '13 at 03:55
  • The position relative is used to center the div vertically, using the `height: 20%; top: (50-20/2)%` technique. I only use 3 IDs because I know there will only be one of those in the DOM. What's the benefit of using classes instead? I figured out what the problem was, and posted the answer. – dcastro Jan 28 '13 at 04:34
0

According to @dcastro answers ( with I full agree ) Any parent element must have an fixed value ( like in px ) instead a relative value (like % ) . So, a little trick using Jquery that allows to use only relative value

<div id="E_slick" style="height: 75%">
    <img class="eve_img" src="myfile.jpg" style="max-width: 100%; max-height:100%"> 
</div>

So, the trick is to get the hood height and set it to img, to make it easier, lets use jQuery:

$('.eve_img').height( $("#E_slick").height() )
Diego Favero
  • 1,969
  • 2
  • 22
  • 32