CSSを使用してサイズ変更中にDivのアスペクト比を維持するにはどうすればよいですか?

アスペクト比を維持しながら Div サイズを応答的に変更する方法

画像のサイズを変更するとき、幅または幅を設定することでアスペクト比を維持するのは簡単です。身長をパーセンテージで表したもの。ただし、非画像要素に対して同じ効果を実現するのは難しいように思えるかもしれません。サイズ変更中にアスペクト比を維持するために、パーセンテージを使用して div の幅と高さをリンクできますか?

解決策

もちろんです! CSS は、この問題に対する独創的な解決策を提供します。直観に反しているように思えるかもしれませんが、パディングトップのパーセンテージは実際には、それを含むブロックの幅に関係します。これにより、指定された幅に基づいて動的な高さを作成できます。

次の CSS コードを考えてみましょう:

.wrapper {
  width: 50%; /* Set the desired width */
  display: inline-block;
  position: relative;
}
.wrapper:after {
  padding-top: 56.25%; /* 16:9 aspect ratio */
  display: block;
  content: '';
}
.main {
  position: absolute;
  top: 0;
  bottom: 0;
  right: 0;
  left: 0;
  background-color: deepskyblue;
  color: white;
}

HTML で、サイズを変更したい div をラップします。 "wrapper" のクラス:

<div class="wrapper">
  <div class="main">
    This is your div with the specified aspect ratio.
  </div>
</div>

この CSS は、 「ラッパー」部門パディングトップをラッパーの幅のパーセンテージとして設定することにより、ラッパー内の div のアスペクト比を効果的に修正します。ラッパーのサイズが変更されると、疑似要素も変更され、含まれる div (「メイン」) が常に目的のアスペクト比を維持することが保証されます。

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