高さに基づいた Div アスペクト比の維持

要素の幅を高さのパーセンテージとして維持するのは難しい場合があります。 padding-top にパーセンテージ値を使用すると逆の効果が得られる可能性がありますが、padding-left のパーセンテージはオブジェクトの高さではなく幅に依存します。

この問題に対処するために、CSS ではアスペクト比プロパティが導入されています。高さに基づいて一貫したアスペクト比を維持するための洗練されたソリューションを提供します。次のコード スニペットは、その使用法を示しています。

.box {
  height: 50%;
  background-color: #3CF;
  aspect-ratio: 2 / 1;
}

この例では、.box 要素の流体高さは 50%、アスペクト比は 2:1 です。コンテナの高さが変更されると、それに応じてボックスの高さと幅が調整され、アスペクト比が維持されます。

アスペクト比プロパティにより、テキストの内容やコンテナのサイズに関係なく、ボックスの幅が高さに比例したままになります。 。これにより、複雑な JavaScript ソリューションの必要性がなくなり、アスペクト比を維持するためのクリーンで効率的な CSS のみのアプローチが提供されます。