Ritagliare le immagine con il css

Utile quando è necessario visualizzare una serie di immagini di dimensioni diverse con una dimensione omogenea.

HTML

<div class="item">
    <img src="/some_path" alt="" />
</div>

CSS

.item {
    position: relative;
    width: 100%;
    padding-top: 56.25%;
}

.item img {
    max-height: 100%;
    left: 50%;
    position: absolute;
    top: 50%;
    transform: translate(-50%, -50%);
    object-fit: cover;
    width: 100%;
}