흠... 뭔가 복잡해 보이네요...

일단 기본적으로 width: auto; height: auto; max-width: 400px; max-height: 400px; 를 쓰면 가로나 세로 400px에 맞게 알아서 줄어듭니다.
(중앙 정렬은 text-align 이나 vertical-align, margin 을 이용하면 되겟졍)

1, 2번은 어떻게 줄어드는건지 이해가 잘 안되네요.

아니면 http://fluidity.sexy/ 란 플러그인도 있습니다. 이제보니 도메인이 조금 이상하군요(?)


덧, 디자인 능력 부럽습니다. (_ _)