CSS: crop verticale delle immagini

Per effettuare il crop (taglio) verticale di un'immagine con i CSS la soluzione più semplice è quella di sfruttare la proprietà overflow.

Data la seguente marcatura:

<figure class="featured">
	<img src="image.jpg" alt="" class="thumb" />
</figure>

applicheremo il seguente codice CSS, utile quando abbiamo una griglia creata con i float e vogliamo ottenere un layout uniforme anche con immagini di dimensioni diverse:

.featured {
	height: 200px;
	padding: 5px;
	border: 1px solid #ddd;
	overflow: hidden;
}

.thumb {
	display: block;
	margin: 0 auto;
	max-width: 100%;
	height: auto;
}