divで囲まれたimg要素があります。
<div class="wrapper">
<img class="image" src="xxxx" />
</div>
- imgのアスペクト比を保ちつつdivの中いっぱいに拡大表示したいです。
- 画像はすべて表示されるようにしたいです。(divをはみ出さない)
- 縦か横に隙間が出来る場合は、画像は縦横センタリングしたいです。
- divの幅高さは固定です。
出来ればcssで実装していのですが、不可能であればjsを使うことも検討しています。
どのように実装すればいいでしょうか。