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