Si no entiendo mal, lo que quieres lograr es que una imagen se muestre dentro de unos límites (p.e. 100px x 140px) ocupando todo el espacio y que se adapte a éste de forma que siempre muestre la parte central.
Se logra con las propiedades object-fit
y object-position
de esta forma:
En el html
Necesitas un contenedor para la imagen además de la imagen en sí:
<div class="imagen-de-perfil">
<img src='https://robohash.org/random'>
</div>
En el css
Determinas las dimensiones del contenedor y luego cómo va a adaptarse la imagen a él:
.imagen-de-perfil {
height: 100px;
width: 140px;
}
.imagen-de-perfil img {
object-position: center;
object-fit: cover;
width: 100%;
height: 100%;
}
Puedes variar los parámetros para que la imagen se muestre completa (object-fit: contain
) o para colocarla de otro modo (por ejemplo, que siempre se vea la esquina superior izquierda object-position: top left;
)
Hay amplia documentación en la red sobre estas propiedades CSS, así que no tendrás problema en encontrar ejemplos.