JavaScript を使用せずにアスペクト比を維持するにはどうすればよいですか?

幅を比例的に調整してアスペクト比を維持する

JavaScript を使用せずに要素の高さに基づいて要素のアスペクト比を維持するのは難しい場合があります。高さのパーセンテージとしてパディング左を使用することを検討することもできますが、この方法は効果的ではないことがわかります。

次のマークアップを考えてみましょう:

<code class="html"><div class="box">
  <div class="inner"></div>
</div></code>

目的は、ボックスのアスペクト比を維持することです。

<code class="css">.box {
    position: absolute;
    margin-top: 50%;
    bottom: 0;
}
.inner {
    padding-left: 200%;
}</code>

幸いなことに、アスペクト比プロパティというネイティブ CSS ソリューションが存在します。このプロパティを使用すると、要素の幅と高さの比率を設定できます。

<code class="css">.box {
  height: 50%;
  background-color: #3CF;
  aspect-ratio: 2 /1;
}</code>

この例では、ボックスの高さは 50%、アスペクト比は 2:1 です。コンテナのサイズを変更すると、ボックスのアスペクト比が維持され、常に比例的なバランスが保たれます。

以上がJavaScript を使用せずにアスペクト比を維持するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。