En algunas oportunidades nos topamos con la necesidad de alinear imágenes de diferentes tamaños a una sola medida, tanto horizontal como verticalmente para simplificar la estructura de diseño o la carga de images de las personas que luego administraran ese desarrollo web.

Problema

Si nosotros forzamos un ancho o un alto fijo de imágenes de diferentes proporciones éstas se distorsionarán.

Por ello, si cambiamos el ancho y alto de las imágenes a 250px conseguimos el siguiente resultado distorsionado:

img {
height: 250px;
width: 250px;
}

Solución

Añadimos la propiedad object-fit con valor cover:

img {
height: 250px;
width: 250px;
object-fit: cover;
}

Otra implementación estándar que podrías encontrar dentro de tu CSS;

figure {
    width: 100%;
    height: 400px;
}
figure img {
    object-fit: cover;
    width: 100%;
    height: 100%;
}

y codigo

<figure>
    <img alt="This is an image" src="/image.jpg">
</figure>