Разместить изображение в контейнере который меньше по размеру без деформации

Предположим что у меня есть родительский контейнер с размерами 300px*300px. Внутри него размещается изображение с размерами 300px*500px. Задача разместить изображение таким образом, чтобы оно не изменило размеры, а отцентрировалось и часть верха и низа его скрылось. Задача вроде тривиальная, но решения пока не нашел.

JsFiddle

Ответ

.wrapper { display: flex; justify-content: center; border: 1px solid red; box-sizing: border-box; width: 200px; height: 200px; overflow: hidden; } .img { align-self: center; }