Adapter l'image au point de la grille

gmlt.A:

Je suis en train de faire un élément de carte qui se compose de plusieurs éléments de texte et une image. Mon but est de rendre l'image correspondante correspond uniquement cellule de la grille et non pour provoquer la croissance de lui. La hauteur de la ligne de la grille devrait être tirée par le contenu du texte (sur le côté droit de la carte).

J'ai réussi à le faire fonctionner sur Chrome, Firefox, mais permet toujours l'image d'être beaucoup plus grand.

Voici mon prototype: https://codepen.io/gmltA/pen/yLNWmrZ

Chrome:

Firefox:

Je suppose que je manque quelque chose dans cette partie du code (qui est responsable de l'article de la grille et son contenu)

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

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

Option la plus évidente est de repli ici à l'image comme fond de l'article, mais honnêtement, je ne veux pas faire cela, si une autre solution.

G-Cyril;

une astuce serait de donner une marge négative inférieure à l'image afin d'éviter d'étirer le conteneur hauteur passé de sibblings.

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

stylo en forme de fourche: https://codepen.io/gc-nomade/pen/gOpNYGj

à côté de la question, le comportement FF semble celui d'attendre pour mon humble avis.