I am trying to make a card element which consists of several text elements and an image. My goal is to make image only fit corresponding grid cell and not to cause it's growth. The height of grid row should be driven by text content (on the right side of the card).
I've managed to make it work on Chrome, but Firefox still allows image to be much bigger.
Here is my prototype: https://codepen.io/gmltA/pen/yLNWmrZ
Chrome:
Firefox:
I guess I'm missing something in this part of the code (which is responsible for grid item and it's contents)
.card__image-wrapper {
grid-area: img;
max-width: 124px;
padding: 4px;
img {
object-fit: contain;
max-width: 100%;
max-height: 100%;
}
}
The most obvious fallback option here is to set image as item background, but I honestly don't want to do this, if there is another solution.
a trick would be to give a bottom negative margin to image to avoid to stretch the container past height of sibblings.
img {
object-fit: contain;
max-width: 100%;
max-height: 100%;
margin-bottom:-100%;
display:block;
}
forked pen : https://codepen.io/gc-nomade/pen/gOpNYGj
beside the question, FF behavior seems the one to expect for my own humble opinion.