CSS "crop" images, but align in center vertically

css, html, image

Solution

/* Just gonna leave this here.. */

.crop {
    position: relative;
    overflow: hidden;
    height: 180px;
    margin: 8px;
}
.crop img {
    position: absolute;
    left: 50%;
    top: 50%;
    -webkit-transform: translate(-50%,-50%);
    -ms-transform: translate(-50%,-50%);
    transform: translate(-50%,-50%);
}

Problem

I'm currently cropping images with CSS as so: ``` <div class="crop"> <img src="image.png" alt=""> </div> .crop { width: 150px; height: 150px; overflow: hidden; } .crop img { width: 150px; height: auto; margin: 0 0 0 0; } ``` This way, it aligns the image within the container horizontally. However, I have no idea how to align the image vertically in the center (so it's right in the middle). Any help?

Original source

Related problems