縦横のサイズを指定したdiv要素を画面の大きさに合わせて比はそのままに拡大縮小したい

Question

前提

HTML + CSSで作っています。

実現したいこと

縦横のサイズを指定してあるdiv要素を画面の大きさに合わせて比はそのままに拡大縮小をしたいです。
背景画像で例えるとbackground-size: contain;のような感じです。
width:100%; や height:100%; を使っているものは見つけましたが、両方ともpxで指定したいです。
もし無理だったら、他の解決策を教えていただけると嬉しいです。

試したこと

.wrapper {
max-width:1620px;
max-height:2160px;
width:100%;
height:100%;
}

は、画面より指定サイズが大きい場合に100%になってしまいました。

ソースコード

<div class="wrapper">
<!--コンテンツが入ります。-->
</div>

追記

画面の大きさに合わせて比はそのままに拡大縮小をしたいです。

画面は100vw x 100vhというつもりで使いました。わかりにくかったかもしれません。

Answer 1

.wrapper {
  aspect-ratio: 1620 / 2160;
  width: 100%;
}

こういう意味でしょうか。

Comments

[programming-go]

回答ありがとうございます！
widthだけでなく、heightも画面のサイズに合わせたいのですが、その場合はどうすればいいでしょうか？
height:100%も追記してみるとサイズが画面ピッタリになってしまいました。。。

Answer 2

object-fit: containでしょうか？

object-fit - CSS: カスケーディングスタイルシート | MDN

コメントを受けて追記

こういうことですかね……？

		.wrapper {
			aspect-ratio: 1620 / 2160;
			max-width: 100vw;
			max-height: 100vh;
		}

Comments

[programming-go]

例えば <img> や <video> などの中身を、コンテナーにどのようにはめ込むかを設定します。

と書いてありましたが、<div>などの要素にも使えるのでしょうか？
こちらの環境では動きませんでした。
使えるのなら、実際にCSSを掲示していただけると嬉しいです。

[Lhankor_Mhy]

div に直接設定するならば、それこそ背景画像にして、background-size: contain; でいいような気がします。
なにかやりたいことの制限があるなどして、それではダメな理由があれば、教えてください。

[Lhankor_Mhy]

もしかして、「コンテンツ」とは画像の話ではない……？

[programming-go]

background-size: contain;だと子要素のパーセントでのサイズ指定ができないので、他のやり方を探していました。わかりやすい回答、ありがとうございます！