正方形の中に伸縮自在で異なるサイズ比率の画像を配置する

ワードプレスとかで画像の大きさが縦長・横長いろいろあるけど、とりあえず正方形の中に長編基準で天地左右センターに配置したい場合。
なんで、縦長の画像の場合は、左右がアキになり、横長の画像は上下にアキができる感じです。(のちほど画像もいれませう)
それと、レスポンシブにしたいので正方形(スクエア)を維持して伸縮自在にしたい場合。
こんな感じでいけます。

 

注意点はこれの前にdisplay:tableとかやってるとハマります。
ハマりました。