Responsive vertical center with overflow hidden

Question

After searching both Stack Overflow and Google I still wonder how to vertical center a image that is bigger than it\'s parent element. I use no height, just max-height, because

Answer 1

I found a way to make it work with only a max-height (as opposed to a fixed height) set on the container.

The bad news is that it requires an additional wrapper element.

HTML:

CSS:

.img-wrapper {
    overflow: hidden;
    max-height: 425px;
}

.img-container {
    max-height: inherit;
    transform: translateY(50%);
}

.img-wrapper img {
    display: block;
    transform: translateY(-50%);
}