CSS: crop en imagenes

Diferentes ejemplos para redimensionar imagenes usando solo CSS. La propiedad object-fit se encarga de cambiar el tamaño del contenido de un elemento para que se ajuste a su contenedor.

La propiedad tiene 5 valores diferentes:

1. contain – se redimensiona manteniendo su relación de aspecto para colocarlo centrado dentro del contenedor.
2. cover – se redimensiona manteniendo su relación de aspecto para cubrir toda la superficie del contenedor.
3. fill – las dimensiones se ajustan para cubrir todo el contenedor, incluso perdiendo su relación de aspecto.
4. scale-down – se redimensiona como si se especificaron ‘none’ o ‘contain’, lo que se resultará en el tamaño concreto del objeto más.
5. none – no se redimensiona.

El valor cover es el más apropiado cuando hablamos de crop o recortar una foto.

Por ejemplo queremos hacer crop a una foto para que tenga un tamaño cuadrado… el css de la imagen sería:

.crop{
  width: 200px;
  height: 200px;
  object-fit: cover;
}

Demo: