Cómo recortar una imagen usando CSS para adaptarla a diferentes dispositivos

Hola!

Tengo una imagen de cabecera que es cuadrada y en mobile queda bien, pero en desktop queda demasiado grande.

Lo ideal sería que no mostrara un 25% de arriba y un 25% de abajo para que parezca como rectangular. He intentado usando overflow: hidden; pero no lo logro.

Alguna idea con esto?

Muchas gracias!

Utiliza un breakpoint, (ejemplo 1024px) y luego le aplicas lo que tu le has comentado:

Utiliza esta herramienta para poder ayudarte mejor.

Un editor de texto
Create a new fiddle - JSFiddle

Puedes ponerle un tamaño fijo al contenedor de la imagen no se
500px
Y la imagen la centras vertical y absolutamente.

Al contenedor ponle un max-height y un overflow hidden
y a la imagen que estara dentro de dicho contenedor ponle width 100%

EJEMPLO
An Anonymous Pen on CodePen