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

レスポンシブなサイズ変更による Div ディメンションのアスペクト比の維持

レスポンシブ Web デザインの重要な側面の 1 つは、要素がさまざまな要素にシームレスに適応することです。本来の特性を維持しながら画面サイズを変更できます。幅または高さのパーセントを指定したときの画像の動作に似た、特定のアスペクト比に従う div 要素を作成したいと想像してください。 JavaScript を使用せずにこれを実現することは可能ですか?

答えは、完全にイエスです。次の例で示すように、純粋な 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 class="wrapper">
  <div class="main">
    This is your div with the specified aspect ratio.
  </div>
</div>

このスニペットでは、「.wrapper」 div がコンテナーとして機能し、その幅は50% に設定します (これを希望のサイズに調整できます)。重要な点は「.wrapper:after」疑似要素にあります。パディングトップを希望のアスペクト比 (この場合は 16:9) の逆数である 56.25% に設定すると、コンテナの高さが正しい比率を維持するように自動的に調整されます。

.main" div は ".wrapper" 内に絶対的に配置され、領域全体を埋めます。視認性を高めるために単色の背景色と対照的なテキストを表示します。

この手法を利用すると、アスペクト比を簡単に維持するレスポンシブ div を作成でき、さまざまなデバイスや画面サイズにわたって一貫した見た目の美しさを確保できます。

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