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