Ridimensionare le immagini con i CSS

In genere, quado si mette su un sistema di upload, si fa anche in modo che le immagini vengano ridimensionate durante il caricamento.
Questa soluzione potrebbe, però, non essere abbastanza flessibile per tutti i casi.
Potremmo anche far caricare l'immagine per intero e poi simulare un cripping con i CSS.
Così facendo mostreremo solo la parte della foto che ci interessa, ma l'immagine sarà sempre disponibile per intero.
Cominciamo con la parte HTML:

<div class="cornice-foto">
  <img src="immagine.jpg" alt="Immagine croppata" />
</div>

Codice basilare.

A questo punto il CSS:

.cornice-foto {
  width: 400px;
  height: 300px;
  overflow: hidden;
}

.cornice-foto img {
  width: 100%;
  height: auto;  
}

Al div che contiente l'immagine assegnamo una dimensione fissa e impostiamo di nascondere la parte eccedente (overflow: hidden;).
All'immagine assegnamo una dimensione del 100% in larghezza, e l'altezza se la ricaverà in autmatico.
Ovviamente questa soluzione è più flessibile, ma dovete anche tenere conto che l'immagine caricata sarà più pesante di una croppata da programma.
Quindi prima di usarla stabilemente studiate bene i costi e benefici e controllate se è una soluzione che può far davvero al caso vostro.