Veo que muchas personas han sugerido el ajuste de objetos, que es una buena opción. Pero si también quiere que funcione en navegadores antiguos , hay otra forma de hacerlo fácilmente.
Es bastante simple. El enfoque que tomé fue colocar la imagen dentro del contenedor con absoluta y luego colocarla justo en el centro usando la combinación:
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
Una vez que está en el centro, le doy a la imagen,
// 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%;
Esto hace que la imagen tenga el efecto de Object-fit: cover.
Aquí hay una demostración de la lógica anterior.
https://jsfiddle.net/furqan_694/s3xLe1gp/
Esta lógica funciona en todos los navegadores.