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

レスポンシブ サイズ設定で Div アスペクト比を維持する方法

CSS では画像のアスペクト比をパーセンテージベースの幅または高さで維持できますが、同じ手法では維持できない場合があります。他の要素にも直接適用できるようです。ただし、純粋な CSS を使用して div のアスペクト比を維持することは可能です。

解決策:

パディングトップのパーセンテージは、それを含むものに対して相対的であるという事実を利用します。ブロックの幅。これをネストされた div 構造と組み合わせることで、アスペクト比がロックされた要素を作成できます。

例:

.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 class="wrapper">
  <div class="main">
    This is your div with the specified aspect ratio.
  </div>
</div>

この例では、 .wrapper div の幅は 50% です。アスペクト比を確立するために疑似要素 (.wrapper:after) が追加されます (この場合は 16:9)。ネストされた .main div は .wrapper div 全体を埋め、.wrapper div のサイズが変更されてもコンテンツが指定されたアスペクト比を維持するようにします。

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