CODEWITHSUNDEEP
htmlcss
Daniël Voogsgerd
Daniël Voogsgerd

Reputation: 600

img with max-height 100% is taller than parent in 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

What I'm trying to accomplish

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).

The problem (Pen)

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

Partial solution (Pen)

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.

Update

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

Upvotes: 1

Views: 649

Answers (2)

Daniël Voogsgerd
Daniël Voogsgerd

Reputation: 600

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 here

Upvotes: 1

Matthew
Matthew

Reputation: 8416

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

Upvotes: 2

Related Questions