【问题标题】:Trouble adjusting images inside Cards无法调整卡片内的图像
【发布时间】:2020-12-10 15:59:39
【问题描述】:

我正在尝试做的事情是从 API 获取国家数据并将它们全部呈现为页面上的卡片。

我在调整标志的大小时遇到​​了麻烦因为它们都有不同的大小

我已将width: 100%; 应用到卡内,并将overflow: hidden 应用到其父卡。但是我尝试应用的高度不一样 min-height: 50% 并没有完全完成这项工作-

看到澳大利亚国旗了吗?它在顶部和底部有白条,而图像没有margin 等。你能告诉我如何使它们的尺寸相同吗?

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

【问题讨论】:

  • 您遇到的问题是图像大小不同。我们不想扭曲图像,所以我唯一能想到的就是将图像作为背景封面。
  • @CyrusZei 我想到了这一点,但由于我正在获取数据并将其映射到组件,因此我无法访问 sass 中的图像 URL。为脚本中的每个数据项设置背景会很麻烦,所以我正在寻找一个只使用样式表的更简单的解决方案!

标签: css sass flexbox css-grid


【解决方案1】:

添加图片样式:

Object-fit: cover;

【讨论】:

  • aha object-fit 是我以前从未使用过的属性,但这次它完成了我的工作!
猜你喜欢
  • 2022-01-23
  • 1970-01-01
  • 2021-07-31
  • 1970-01-01
  • 2023-03-08
  • 1970-01-01
  • 2021-01-30
  • 1970-01-01
  • 1970-01-01
相关资源
最近更新 更多