1

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

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

我想要完成的事情

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

问题（笔）

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

部分解决方案（笔）

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

更新

我将包含解决方案的笔与包含问题的笔分开，以使事情更清楚。

4

2 回答 2

2

问题是您的图像没有正确的参考框架来计算它们的高度，因此使用百分比的最大高度（或高度）将无法按预期工作。

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

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

于 2013-05-05T12:14:48.093 回答
1

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

我不知道为什么会这样，但我会尽快发布更新。

您可以在此处查看完整的固定代码

于 2013-05-05T13:10:33.167 回答