ホームページ >ウェブフロントエンド >CSSチュートリアル >CSS を使用して要素の幅を高さに比例して設定するにはどうすればよいですか?

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

Barbara Streisand
Barbara Streisandオリジナル
2024-12-15 14:14:18980ブラウズ

How Can I Set an Element's Width Proportionally to Its Height Using CSS?

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

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

これを実現するには、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 要素の高さによって最小幅が決まります。透明な CSS を使用して要素の幅を高さに比例して設定するにはどうすればよいですか?アスペクト比が 1:1 の場合、.container とその子 .contents 要素の幅が常にその高さに比例するようになります。

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

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

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

声明:
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。