调整图像大小但保持其比例？

Question

首先，我看到其他人发了类似的帖子，我会完全阅读它们，但我只是想把一个新的，因为你不知道是否有人有更好的东西。

解释我的情况：

我想制作一个图片库，点击缩略图，然后点击图片的较大版本会出现在他们直接右边的div中。我知道如何做到这一点，但我已经看到了以后会出现的问题。

我的所有图像尺寸都不同，所以我可以看到保持比例正确非常困难。

假设我有一个500px宽和400px高的div。我该怎么做才能将任何尺寸的图像放在任何可以按比例缩小的尺寸中。

仅仅是为了获取信息，我的图像将比div更大。

Answer 1

你可以这样做：

<div style="width: 500px; height: 400px">
   <img style="height: 100%; width: 100%">
</div>​

或使用此处提供的解决方案之一：automatically change the image size in the original ratio of the while change the size of that images parent element

Answer 2

<div style="width: 500px; height: 400px">
   <img src="as.jpg"/>
   <img src="as.jpg"/>
</div>​

CSS

img{
max-height: 20%; 
max-width: 25%;
}