トークの立ち絵表示を良い感じにしたい

[Hiroshiba]

内容

トークの立ち絵表示には課題があり、縦長画面で表示した場合に余白まみれになります。
現在は500pxの画像を等倍で表示しつつ、縦幅が小さいときは上部分が表示されるようになっています。

どうやったら良い感じに表示できるか、はたまたその実装はどうすればよいかをまとめていきたいです。
議論の後実装が完了したらissueはcloseかなと。

満たしたい条件

• 縦幅いっぱいに表示したい
• 横幅を変えても画像の拡大率はそのままになっててほしい
• ある一定以上縦幅が小さくなったときは上部分だけ表示されててほしい
• 左右が見切れたときは中央を表示してほしい
• 6:4くらいの横長画像も問題なく表示したい

画像サイズが500pxしかありませんが、これはエンジン側から返す画像をより高解像度にすることで解決できると思います。

実現方法

問題は↑の条件を満たせるCSSが書けないことです。
javascriptやcanvasをある程度駆使しても良いと思うので、できれば実現したいです。

その他

CSSガチャガチャしていろいろ試すのはfigmaとかが便利かも。
こうやったらできそうというコメントだけでも大歓迎です。