
ショコラ
横幅に合わせて縦の長さを変更するには?
アスペクト比で高さを指定します。

もっさん先輩
aspect-ratio:100/66
「aspect-ratio: 100/66」なら、アスペクト比は「横100:縦66」になります。
例
↓下の場合、最大width が 500px の時、縦の長さは 330px になります。
<div style="max-width:500px;">
<div style="position:relative; aspect-ratio:100/66">
<div style="position:absolute; width:100%; height:100%; background-color:#000; opacity:0.3;"></div>
</div>
</div>
以上