CSS3

プロパティ

aspect-ratio

→● mdn(en) mdn

優先アスペクト比。

このプロパティは、ボックスの優先アスペクト比を設定します。これは、自動サイズやその他のレイアウト関数の計算に使用されます。

auto

自然なアスペクト比で置き換えられた要素は、そのアスペクト比を使用します。それ以外の場合、ボックスには優先アスペクト比がありません。アスペクト比を含むサイズ計算は、常に内容ボックスの寸法で機能します。

<IMG style=" width:150px; aspect-ratio:auto; " src="Com/100x50.gif">

<ratio> ○

＝幅/高さ

¶幅、高さ［number］？

ボックスの推奨アスペクト比は、指定された 幅/高さ の比率です。アスペクト比を含むサイズ計算は、ボックス サイズで指定されたボックスの寸法で機能します。

<ratio> が縮退している場合、プロパティは代わりに auto として動作します。

<IMG src="Com/100x50.gif" style="border:1px solid red;
 width:150px;
 aspect-ratio:1/1;
">

¶widthなどが必要のようだ

auto && <ratio>

auto と <ratio> の両方が一緒に指定されている場合、自然なアスペクト比で置き換えられた要素でない限り、推奨されるアスペクト比は 幅/高さ の指定された比率です。
自然なアスペクト比の場合は、代わりにそのアスペクト比が使用されます。すべての場合において、アスペクト比を含むサイズ計算は、常に内容ボックスの寸法で機能します。

<ratio> が縮退している場合、プロパティは代わりに auto として動作します。

<IMG src="Com/100x50.gif" style="border:1px solid red;
 width:150px;
 aspect-ratio:auto 1/1;
">

¶ただwidthなどの片方だけの指定だけでもいいと思うが。

テスト