이미지 리사이징에 대해서 질문드립니다.

나름대로 커스터마이징 하는 과정중에서 이미지 리사이징과 관련된 부분에서 질문드립니다. 

정확히는 일정부분이상 사이즈가 큰 사진을 올릴경우 크기조절에관한 문제입니다. 

우선 새 게시글 작성을 통해 사진을 업로드하면 미리보기는 아래와 같이 나옵니다. 

문제는 실제 사진이 업로드 되었을 경우,  아래와 같이 양 옆이 넘쳐서 올라간다는 것입니다. 

위와 같은 문제 해결을 위해 제가한 방법들로는

1. <img> 태그에 직접 style을 먹여 margin = auto, 또는 itemcenter등 css를 적용해보았지만 미동도...하지않았습니다. 

2. post/models 에서 ResizeToFill 필드 부분의 해상도를 300 300 또는 그 이하로 줄여보았지만 오히려 올라오는 사진의 크기는 위와동일해지면서 그림화질만 깨지는 효과가 나왔습니다. 

3. save 메소드를 오버라이딩해서 리사이징을 시도해보았지만, 이 부분은 제가공부가 부족해서인지 아직 성과를 내진 못했습니다. (commit=false)를 통해서 그 실제 저장전 메소드를 구현해 리사이징해야한다는 데까진 알겠는데, 

그 리사이징 메소드를 어떻게 구현해야할지 감이 안오네요...

이런 사진 해상도와 관련된 리사이징은 어떻게 접근해야할지 조언을 구하고 싶습니다.