我必须在页面中显示一堆图像。图片大小不一，有的很宽，有的很薄。我想把它们都放在一个固定宽度和固定高度的容器中。
放置图片的逻辑应该是这样的：假设图片小于容器，将其放大到最大尺寸以保持纵横比，并将其放在容器的中心。如果图像较大，请在保持纵横比的同时缩小图像。
一些例子：假设我们的容器是 150x150，我们有一个 100x50 大小的图像。在这种情况下，图像应放大到 150x75。如果我们有一个大小为 100x300 的图像，则图像应缩小到 50x150。
虽然这可以用 javascript 轻松完成，但如果可能的话，我想避免这种情况。我想知道是否有任何方法可以单独使用 CSS 来实现这一点。我可以使用仅 CSS3 的解决方案，甚至可以使用 webkit/firefox 特定指令，只要它适用于最新版本的 Chrome、Firefox 和 Safari（如果别无选择，我将使用 IE 的后备）。
编辑：我当然知道最大高度和最大宽度。问题是如果我将 max-height 和 max-width 都设置为 150，如果需要，图像将不会按比例放大。