質問: ### 前提・実現したいこと ・image画像の縦横比は元のまま、ウインドウサイズの縦横の小さい方に合わせて拡大・縮小して ウインドウがどんな大きさ、形になっていても 画像がウインドウに収まっている状態で表示させたい。 ・左右中央寄せにしたい。 ・画像を元の大きさ以上には拡大しないようにしたい。 ・背景画像にする以外の方法で行いたい。 ### 該当のソースコード ◎HTML ``` 画像テスト用 ``` ◎CSS ``` /* style CSS */ body { background-color: #ffffff; } .imgSize { max-width: 450px; /* 最大幅 */ margin-right: auto; margin-left : auto; } P.imgSize img { width: 100%; } .textCenter{ text-align: center; } ``` ### 発生している問題・エラーメッセージ 上記のやり方ですと ウインドウの横幅をドラッグして大きくしたり縮めたりしてみると ウインドウの大きさに追従して画像が拡大、縮小され 指定した最大幅以上には拡大されないのですが ウインドウの縦幅を小さくしたときに、画像が縮小されず 下にはみ出した状態になってしまいます。 これを、ウインドウが縦に短くなったときにも 縮小して全部表示されるようにしたいです。 いろいろ調べてみたのですが、縦横どちらの動きにも 追従する方法が見つけられませんでした。 すみませんが、ご教授お願いいたします。 追記: イメージ的にこんな感じです(画像ソフトで作ったものです) ![イメージ説明](https://teratail-v2.storage.googleapis.com/uploads/contributed_images/535dc3b038c9b15b531a70c1988ab4bf.png) ウインドウの上下を縮めたとき ![イメージ説明](https://teratail-v2.storage.googleapis.com/uploads/contributed_images/fb1298af508032acda25a65128ea6371.png) ウインドウの左右を縮めたとき ![イメージ説明](https://teratail-v2.storage.googleapis.com/uploads/contributed_images/9d3176f6c2585b5fac72b5503dbdef6b.png)
回答: こういう感じとか。 ``` img { display: block; max-height: 100vh; max-width: 100vw; margin: 0 auto; } ``` **動くサンプル:**