调整大图像的大小以填充定义的空间而不拉伸

Question

我正在尝试制作一个2x2网格，每个单元格为300x300px。每个单元格都有一个淡入淡出的图像，使用AJAX重新加载（精确的jQuery） - 在ajax上创建一个4图像库。 所有图像都被简单地转储到一个文件夹中，因此没有定义它们的高度或宽度。

有什么方法可以填补这个空间吗？例如，肖像形状的图像将调整到高度= 300，而其宽度可能更小......并且类似于景观图像（宽度= 300，高度更小）？我正试图消除细胞的任何大小调整，因为它看起来相当可怕。

我会将这些垂直和水平对中，直到后来。 谢谢你的帮助！

更新： 我已经粘贴了当前的代码 http://pastebin.com/Hz4fJk9p

Answer 1

使用max-height:300px;和max-width:300px;，假设您的图片在两个维度上都不小于300像素。

Answer 2

即使它不是CSS，我也发现了一些有趣的库来进行图像大小调整以适应容器：

• http://plugins.jquery.com/project/myimgscale
• http://code.google.com/p/jquery-imagefit-plugin/