css - 在 div 内缩放

Question

我有固定宽度和高度（400x300px）的包装div。在具有自己的宽度/高度（横向 800x600 像素）或（纵向 600x800 像素）的内部，有时图像可以具有不同的大小。如何使用 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%;
}

见演示。

Answer 2

使用最大宽度和最大高度：

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