divで囲まれたimg要素があります。

<div class="wrapper">
    <img class="image" src="xxxx" />
</div>
  • imgのアスペクト比を保ちつつdivの中いっぱいに拡大表示したいです。
  • 画像はすべて表示されるようにしたいです。（divをはみ出さない)
  • 縦か横に隙間が出来る場合は、画像は縦横センタリングしたいです。
  • divの幅高さは固定です。

出来ればcssで実装していのですが、不可能であればjsを使うことも検討しています。
どのように実装すればいいでしょうか。