Javascript 不等高度

我想在不改变图像纵横比的情况下，使图像高度不相等，并在调整大小时保持布局不变。我想做的是：

我知道这很容易使用css网格，但我认为我可以使我的代码更简单，因为布局并不复杂

我试过的

正文{
身高：100%；
}
.卡片{
右边距：20px；
保证金底部：2.6668雷姆；
显示：内联块；
垂直对齐：顶部；
}
.中等{
宽度：65%；
保证金权利：5%；
高度：600px；
溢出：隐藏；
}
.小{
宽度：25%；
高度：300px；
溢出：隐藏；
}
img{
宽度：100%；
}

---

试试这个代码

正文{
身高：100%；
}
*{
框大小：边框框；
}
.卡片{
右边距：20px；
垂直对齐：顶部；
高度：100vh；
显示：块；
溢出：隐藏；
}
.中等{
宽度：65%；
保证金权利：5%；
浮动：左
}
.小{
宽度：25%；
浮动：左
}
.card图像{高度：100%；}
.卡图像img{
宽度：100%；
身高：100%；
对象匹配：覆盖；
}

当您想要整个图像时，为什么要将这两个div的高度都设置为固定的？？你到底在期待什么？你没有明白我的意思。检查一下我贴的图片，告诉我你会怎么做这样的布局。不清楚你想要实现什么。图像可以很好地调整大小并保持其纵横比，那么您试图解决的问题是什么？我想在调整大小时限制图像的高度和宽度，例如：