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

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

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