四辺全て切れず、縦横比を維持したままボックスを拡縮したい

お世話になります。

画面サイズに合わせて拡縮するボックスを作っています。
縦横一緒に伸縮するときはきちんと拡縮するのですが、
横のみ拡大したときに縦が切れてしまいます。
https://unicolabo.jp/topics/815.html
↑のサイトのようになってしまいます。

html
1<div class="featherlight-content">
2  <div class="cube"></div>
3</div>

css
1/* handling phones and small screens */
2@media only screen and (max-width: 1024px) {
3	.featherlight .featherlight-content {
4		/* dimensions: maximize lightbox with for small screens */
5		margin-left: 0;
6		margin-right: 0;
7		max-height: 98%;
8		padding: 30px 70px;
9		/*padding: 10px 10px 0; ORG*/
10		border-bottom: 10px solid transparent;
11	}
12}
13
14
15.cube {
16    overflow: hidden;
17    padding: 3.21% 5px 3.21% 3.21%;
18    margin: auto;
19    background: rgba(0,0,0,0.3);
20    border: solid  1px;
21    cursor: auto;
22    white-space: normal;
23    width: 88.998%;
24    height: 54.017vw;
25    max-width: 1440.16px;
26    max-height: 874.31px;
27    position: absolute;
28    right: 0;
29    left: 0;
30    top: 0;
31    bottom: 0;
32}
33

縦に縮小した際は、縦が切れず、縦横比を維持したまま縦幅に合わせて小さなボックスが出てほしいのです。
ご教示いただけましたら幸いです。

行動規範の内容に同意します

回答1件

ベストアンサー

@media の aspect-ratio で画面の縦横比が調べられますので、それで切り替えればいいでしょう。

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

分かり安くするために、要素の縦横比を2対1ということでサンプルを作成してみました。

css
1.cube {
2  overflow: hidden;
3  margin: auto;
4  background: rgba(0,0,0,0.3);
5  border: solid  1px;
6  width: 90vw;
7  height: 45vw;
8  position: absolute;
9  right: 0;
10  left: 0;
11  top: 0;
12  bottom: 0;
13}
14
15@media (min-aspect-ratio: 2/1) {
16  .cube {
17  width: 180vh;
18  height: 90vh;
19  }
20}