在div中缩放<img/>

Question

我有固定宽度和高度（400x300px）的包装div。在具有自己的宽度/高度（横向800x600px）或（纵向600x800px）的内部，有时图像可以具有不同的尺寸。我如何使用CSS进行缩放，以便可以按比例缩小以适应宽度或高度 - 以先到者为准？

以下是代码：

<div style="width:400px; height:300px;">
    <img style="width:auto; height:auto;" src="image url>" />
</div>

由于

Answer 1

.your-image {
  max-width: 100%;
  max-height: 100%;
}

请参阅DEMO。

Answer 2

使用max-width和max-height：

img {
    max-width: 400px; 
    max-height: 300px;
}