Css 如何管理我从同一张卡中的用户处获取的不同维度的图像？

图像来自用户发布的数据库，但这里的问题是图像在卡中具有不同的维度

如果我们固定高度和宽度，pic就不会保持原来的比例

但我希望图片保持原样，但其高度或宽度可能会在卡片内发生变化

{%for show_posts%}
{{person.name}

城市：{post.City}
区域：{post.Area}

{{person.list_date timesince}
{%endfor%}

例如，如果您不希望所有图像大小相同，则应

.card{高度：300px；宽度：300px；}

.card img{width:100%; object-fit: contain;}

---

设置

卡img top的最大高度

最大高度CSS属性设置元素的最大高度。信息技术 防止“高度”特性的使用值变大 大于为最大高度指定的值。-

---

使用固定大小是一个糟糕的解决方案。通过应用相同的问题，我出现在图1中

.card img{width:100%; object-fit: contain;}

.card-img-top {
   max-height: 300px;
   width: auto;
}