Tengo una imagen de 300x300 que me gustaría encajar en una cuadrícula (tamaño 158x175), pero cuando tengo...

 <div className='box'> <div className='test'> <img src='https://via.placeholder.com/300x300' alt='Image Example'/> </div> <div className='test'> <p>Random text</p> </div> <div className='test'> <p>Random text</> </div> </div>

 box { display: grid; grid-template-columns: 158px auto auto; grid-template-rows: 175px; div.test { &:first-child { width: 100%; height: 100%; object-fit: cover; } } }

Como he visto decir a mucha gente al investigar un poco, el bloque de 300x300 se reduce a 158x158, dejando alrededor de 17px de espacio de cuadrícula debajo de la imagen. Me gustaría que la imagen se recortara para que se ajuste a todo el espacio, pero parece que no puedo hacer que funcione. ¿Alguien tiene ideas sobre lo que estoy haciendo mal? También he intentado reemplazar height: 100%; to height: auto , y eso mueve mi imagen hacia abajo unos pocos píxeles, pero tengo prácticamente el mismo problema que antes.