Vejo que muitas pessoas sugeriram o ajuste de objetos, o que é uma boa opção. Mas se você deseja que ele funcione também em navegadores antigos , há outra maneira de fazê-lo facilmente.
É bem simples. A abordagem adotada foi posicionar a imagem dentro do contêiner com absoluta e, em seguida, colocá-la no centro usando a combinação:
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
Uma vez no centro, dou a imagem,
// For vertical blocks (i.e., where height is greater than width)
height: 100%;
width: auto;
// For Horizontal blocks (i.e., where width is greater than height)
height: auto;
width: 100%;
Isso faz com que a imagem obtenha o efeito de Object-fit: cover.
Aqui está uma demonstração da lógica acima.
https://jsfiddle.net/furqan_694/s3xLe1gp/
Essa lógica funciona em todos os navegadores.