画像の縦横比を保ってコンテナにフィットさせる

これまで画像のratioを保ってコンテナにフィットさせたい時は以下でOKだったのですが、ReactやVueでflag変数でクラスをtoggleさせてスタイルを切り替える時にratioがおかしいことになることがありました。
objcect-fit を使うとうまくいったのでこれからはこれでいこう。

img {
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: 100%;
}

でもこれだと、reactiveなJSでスタイルを切り替える時、renderingエンジンが正しく描画してくれない。これからは

img {
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}

ということに気づいた。