使图像适合网格项答案

【问题标题】：Fit image to grid item使图像适合网格项
【发布时间】：2020-04-04 14:15:17
【问题描述】：

我正在尝试制作一个由几个文本元素和一个图像组成的卡片元素。我的目标是使图像仅适合相应的网格单元，而不是使其增长。网格行的高度应由文本内容驱动（在卡片的右侧）。

我已经设法让它在 Chrome 上运行，但 Firefox 仍然允许图像更大。

这是我的原型：https://codepen.io/gmltA/pen/yLNWmrZ

铬：

火狐：

我想我在这部分代码中遗漏了一些东西（负责网格项及其内容）

.card__image-wrapper {
  grid-area: img;
  max-width: 124px;
  padding: 4px;

  img {
    object-fit: contain;
    max-width: 100%;
    max-height: 100%;
  }
}

这里最明显的后备选项是将图像设置为项目背景，但老实说，如果有其他解决方案，我不想这样做。

【问题讨论】：

标签： css google-chrome firefox sass css-grid

【解决方案1】：

一个技巧是给图像一个底部负边距，以避免将容器拉伸到兄弟姐妹的高度。

  img {
    object-fit: contain;
    max-width: 100%;
    max-height: 100%;
    margin-bottom:-100%;
    display:block;
  }

分叉笔：https://codepen.io/gc-nomade/pen/gOpNYGj

除了这个问题，FF 的行为似乎是我个人拙见的期望。

【讨论】：