html - CSS - 任何大小图像的相对大小(比例)

Question

我有一个涉及大量图像的元素。

问题是每个图像都有不同的分辨率(高度/宽度)。它从 200x600 之类的小图像变成了 3000x5000 大声笑。

我正在尝试找到一种方法将所有图像的大小减小到 (MAX-300X300) 但仍然保存图像的比例 - 所以如果它是一个宽 img 它会保持宽但是 - 在范围内最大 300x300。无论图像尺寸是多少，我都找不到一种方法来纠正这一问题。

这是我试过的:

Max-Height:300px;
Max-Width:300px;

但它仍然不能很好地工作......有什么建议吗？

Answer 1

只需将图像放在 <table><tr><td> 中指定高度和宽度，在本例中，假设为 300px x 300px，并指定 max-height: 100%；和最大宽度:100% 到 <img> , 并垂直对齐到 <td> .

这是我为您制定的解决方案...

http://jsfiddle.net/5Fw3s/

希望这对您有所帮助。