CSS を使用して要素の幅を高さに比例して設定するにはどうすればよいですか?

CSS を使用した高さによる要素の幅の調整

元の質問で述べたように、高さに基づいて要素の幅を設定することは、jQuery を介して実現できます。ただし、このプロセスは CSS を使用して効率化できます。

これを実現するには、 などの置換要素の概念を活用します。高さのみが指定されている場合、これらの要素は本質的に幅を調整してアスペクト比を維持します。

次の例を考えてみましょう:

.container {
  position: relative;
  display: inline-block;
  height: 50vh;
}

.container > img {
  height: 100%;
}

.contents {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
}

.container 要素の高さによって最小幅が決まります。透明な アスペクト比が 1:1 の場合、.container とその子 .contents 要素の幅が常にその高さに比例するようになります。

または、.contents のアスペクト比を 4:3 に維持するには、img の高さは 133% になります。 を使用するまたは の代わりに

幅に基づいて要素の高さを調整する必要がある状況については、CSS を使用したアスペクト比の維持に関するガイドを参照してください。

以上がCSS を使用して要素の幅を高さに比例して設定するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。