cssで、親要素の横幅に合わせて縦幅を比率で設定することは出来ますか？

例えば、親要素の幅が1000pxだったとして、高さを横幅の50%（2:1）の比率にしたい場合のcssのオプション設定などはありますでしょうか･･･。

HTML
1<div><!-- 1000pxの親要素 -->
2	<div style="">このdiv要素を500pxの高さに設定したい</div>
3</div>

もちろん、親要素の幅(width)が500pxなら、高さは250px(height)に可変で行いたいです。
親要素そのものを可変で(2:1)に出来るのならそれでも構いません。

Javsscriptを駆使すれば出来るのは分かりますが、cssのみでこれが完結できる設定があるか、ご存知の方はよろしくお願いいたします。

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

回答2件

ベストアンサー

「アスペクト比　CSS」でググると、以下の記事が1位でした。

CSSだけでアスペクト比を固定するテク - Qiita

大変わかりやすいので参考にされてはいかがですか？

投稿2020/12/25 04:26

Lhankor_Mhy

総合スコア36158

sanset

2020/12/26 03:03

ありがとうございました！実現できました。

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

こんな感じでしょうか。

html
1<div id="wrapper">
2    <div id="child">このdiv要素を500pxの高さに設定したい</div>
3</div>

CSS
1#wrapper {
2    position: relative;
3    width: 1000px;
4    border:solid 1px red; /*わかりやすさのため。*/
5}
6#wrapper:before {
7    content:"";
8    display: block;
9    padding-top: 50%; /* 高さを幅の50%に固定 */
10}
11#child {
12    position: absolute;
13    top: 0;
14    left: 0;
15    bottom: 0;
16    right: 0;
17    background-color:yellow; /*わかりやすさのため。*/
18}