img con max-height 100% es más alto que el padre en Chrome

I'm trying to display a gallery of images on a website of mine, but I'm struggling with some weird behavior in Google Chrome. In Opera everything works fine.

Here is a pen with my code Clicka the clack

Lo que estoy tratando de lograr

I've a table with 4 cells per row. Each cell is 25% of the width of the entire table. I want to display the images in a sort of grid. Every cell has a predefined aspect ratio. To do this I use the padding-bottom trick to create an element (figure in my case) with the right height. Inside the element I want to display the image as large as possible without stretching the image (and I want it to be centered).

El problema (Pluma)

In Chrome (v. 26) the portrait images are taller than the parent's height (Even though I set max-height: 100%)

Partial solution (Pluma)

I solved the issue by making the image position: absolute, but that makes it impossible for me to center the images. If somebody knows a way to center the images while being absolutely positioned feel free to post that as an answer.


I separated the pen containing the solution from the pen containing the problem, to make things clearer.

preguntado el 05 de mayo de 13 a las 12:05

2 Respuestas

The problem is that your images don't have the proper frame of reference to calculate their height so using max-height (or height) in percentage will not work as you expect.

If you were to specify a pixel height on one of the parents of your images, you may use percentage based heights on each child. As long as each child can determine it's height from it's parent then this works. Note that absolutely positioned elements will need their parent to have position:relative (or absolute) for this to work.

As it is right now, the images are scaling according to the only DOM node where the height is known: the body

contestado el 05 de mayo de 13 a las 13:05

The parent (figure) has the correct height if I inspect it with the Chrome dev tools, so why doesn't it use that height as frame of reference? - Daniel Voogsgerd

That's the calculated height according to it's behavior. The figure node doesn't actually have a height so it's parents are used to calculate how much of it is visible. It's why using overflow:hidden works but this still doesn't tell the image how to scale properly. - Mateo

Hmm, okay strange that the problem doesn't occur in Opera. Is there a way I can define that height while still using the fluid layout and aspect ratio? - Daniel Voogsgerd

I'm thinking you can. I don't think I've set up a layout exactly like yours before though. - Mateo

I solved it I'll post it as an answer soon :) If you want to play around with the layout you can always fork it. :P - Daniel Voogsgerd

I managed to solve the issue by wrapping the image inside an inline element (I used an anchor tag).

I've no clue why this works but I'll post an update as soon as I know it.

You can check out the complete fixed code aquí

contestado el 05 de mayo de 13 a las 14:05

No es la respuesta que estás buscando? Examinar otras preguntas etiquetadas or haz tu propia pregunta.