CSS 流体布局和动态图像缩放

Question

我有一个关于在 div 容器内动态缩放图像的问题，我正在构建一个投资组合网站，其中包含 3 列的元素图像，所有图像的宽度都可缩放，但高度是静态的(例如 div container => 宽度 33.33334% : 高度 250px).

我对不同的 CSS 想法感到困惑，但由于图像的尺寸和容器不同，布局总是会中断。我在 CSS 和 JS 方面都不是很熟练，现在我有点陷入困境，首先要寻找一些建议，在哪里寻找解决方案，也许是一些代码想法/片段，甚至更好的示例/API 等。

我举了一个小例子说明我现在所在的位置，您可以看到其中一张图片由于其尺寸和布局被破坏而变小了。

jsfiddle 示例: jsFiddle example

很抱歉，我无法更准确地说明这种图像缩放技术的名称，因为我真的不知道，这再次让我在谷歌搜索时头疼。

最好的问候疯狂

Answer 1

我可能对你的要求感到困惑，但如果你只是想让信息 block 的大小保持一致，你可以使用 width: 33.33% 而不是 max -width: 33.33% 和你的图像 width: 100%;高度:100%；

这是一个 updated jsFiddle ;这就是你想要的吗？