CSS: ritagliare la larghezza o l’altezza di un’immagine solo con CSS

Puoi ritagliare le immagini con un paio di righe di CSS, senza Photoshop né altri strumenti di modifica delle immagini. È utile quando le miniature in un layout a più colonne hanno altezze diverse, come qui sotto.

PRIMA

Le altezze irregolari delle miniature possono facilmente scombinare l’intera struttura.

CSS

Copia il codice qui sotto e incollalo nel tuo file CSS.

img {
    height: 200px;
    object-fit: cover;
}

Prova object-position: 10% 10%; se vuoi spostare la posizione dell’immagine all’interno della sua area.

DOPO

Tutte le tue 20 o 30 miniature si adatteranno perfettamente e il layout non sembrerà più disordinato. Puoi usare questo metodo su qualsiasi singola immagine della tua pagina web.