调整卡内图像的麻烦

Question

我要做的是从API提取国家/地区数据并将其全部呈现为页面上的卡片。

我无法调整标志的大小 ，因为它们的大小都不同 。

我已应用width: 100%;使其适合卡片，并且已将overflow: hidden应用于其父卡片。但是高度与我尝试应用min-height: 50%并没有完全完成工作的高度不同-

看到澳大利亚国旗吗？图像上没有margin等时，顶部和底部会出现白色条。您能告诉我如何制作相同尺寸的东西吗？

https://codesandbox.io/s/fetch-countries-api-1ibwp?file=/src/index.js

Answer 1

添加到图像样式：

Object-fit: cover;