最高身高100％的img比Chrome中的父亲高

Question

我正在尝试在我的网站上显示图片库，但我正在努力应对Google Chrome中的一些奇怪行为。在Opera中一切正常。

这是一支带有我的代码Clicka the clack

的笔

我想要完成的事情

我的桌子每行有4个单元格。每个单元格占整个表格宽度的25％。我想以某种网格显示图像。每个单元格都具有预定义的宽高比。为此，我使用padding-bottom技巧创建一个具有正确高度的元素（在我的例子中）。 在元素内部，我想在不拉伸图像的情况下尽可能大地显示图像（我希望它居中）。

问题（Pen）

在Chrome（第26页）中，肖像图像高于父母的身高（即使我设置了max-height: 100%）

部分解决方案（Pen）

我通过制作图像position: absolute解决了这个问题，但这使我无法将图像居中。如果有人知道在绝对定位的同时将图像居中的方法，请随意将其作为答案发布。

更新

我将含有溶液的笔与包含问题的笔分开，以使事情更加清晰。

Answer 1

问题是你的图像没有适当的参考框架来计算它们的高度，所以使用百分比的最大高度（或高度）将无法按预期工作。

如果要在图像的其中一个父项上指定像素高度，则可以使用每个孩子的基于百分比的高度。只要每个孩子都可以从它的父母那里确定它的身高，那么这就行了。请注意，绝对定位的元素将需要其父级position:relative（或绝对）才能使其生效。

就像现在一样，图像根据已知高度的唯一DOM节点进行缩放：正文

Answer 2

我设法通过将图像包装在内联元素中来解决问题（我使用了锚标记）。

我不知道为什么会这样，但我会在知道后立即发布更新。

您可以查看完整的固定代码here

Answer 3

添加溢出：隐藏;到.aspect类。

感谢。