CSSのみを使用してDivのアスペクト比をレスポンシブに維持するにはどうすればよいですか?

CSS を使用してアスペクト比が維持されたレスポンシブ Div

div のサイズ変更中にアスペクト比を維持しようとする場合、次の機能を活用できます。 JavaScript に依存しない CSS。

CSS を使用すると、パーセンテージを使用した要素の高さと幅。これを実現する方法は次のとおりです。

.wrapper {
  width: 50%;
  display: inline-block;
  position: relative;
}

.wrapper:after {
  padding-top: 56.25%;
  display: block;
  content: '';
}

.main {
  position: absolute;
  top: 0;
  bottom: 0;
  right: 0;
  left: 0;
  background-color: deepskyblue;
  color: white;
}

この例では、ラッパー div は希望の幅 (50%) を設定します。 ［wrapper:after］疑似要素は、ラッパーの幅に相対的なパディングトップのパーセンテージを使用します。値 56.25% は、16:9 のアスペクト比に対応します。

メイン div はラッパー div 全体を埋め、wrapper:after 疑似要素のパディングトップのパーセンテージで指定されたアスペクト比を維持します。

CSS を利用することで、div のアスペクト比を維持しながら、応答性よくサイズを変更することができます。 JavaScript。

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