Html 在div中插入具有不同比率的图像而不更改尺寸

我创建了一个具有特定高度和宽度的div。在里面我插入了图像。问题是，如果图像的尺寸相同，那么div就相似。但是如果图像的维度不同，那么div也会改变

例如，请查看以下页面：

所有图像的尺寸都是180*200像素，这就是为什么所有div看起来都很相似（正方形大小的框有白色背景）。

---

我的问题是，我们不能制作一个具有特定尺寸的div，然后在不更改div尺寸的情况下插入不同纵横比的图像，因为这样可以节省将图像一直调整为相同尺寸的时间。

将样式添加到图像样式中

max-width: 100%; 
max-height: 100%; 
width: 100%; 
height: auto;

或

应该行得通

编辑：父div必须具有属性

position:relative
像这样尝试：

.image{
max-width:180px;
max-height:200px;
}

这将使用纵横比调整图像
您可以固定高度并提供最大宽度。我已为您提供了链接。你可以试着用它。我在问题中提到了我曾经尝试过的东西。
.image{
max-width:180px;
max-height:200px;
}