redimensionar url imagem para partes iguais

pessoal preciso de ajuda com um html/css na minha aplicação para subir a foto no perfil, o usuário precisa passar a url da imagem, guardo essa url no database e jogo no meu HTML ${user.fotoProfile}

porem, quando a imagem vem com proporções iguais, eg. 150x150, 650x650, 960x960 . a configuração funciona e preenche meu campo sem distorção.

mas quando a imagem não tem proporções iguais, o campo da imagem fica distorcido.

alguém consegue me ajudar?

HTML

                    <div class="user-img">
                        <a href='profile'><img src="<c:url value="${user.fotoProfile}" />" alt="user-img" class="img-circle img-thumbnail img-responsive"></a>
                        <div class="user-status offline"><i class="zmdi zmdi-dot-circle"></i></div>
                    </div>

CSS

.user-box .user-img {
  position: relative;
  height: 88px;
  width: 88px;
  margin: 0px auto;
}

#wrapper.enlarged .user-box .user-img {
  height: 48px;
  width: 48px;
}