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

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

画像を操作する場合、幅または高さにパーセンテージ値を適用すると、アスペクト比が維持されます拡大または縮小します。ただし、この動作を他の要素で再現するのは難しい場合があります。

幸いなことに、CSS にはパーセンテージを使用して要素の幅と高さをリンクし、アスペクト比の一貫性を確保するソリューションが用意されています。

CSS を使用した解決策

これは、padding-top プロパティのパーセント値が相対的であるという驚くべき事実によって実現できます。含むブロックの幅に合わせます。次の 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;
}

HTML 例:

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

この例では、「.wrapper」 div は幅を 50% に設定します (または任意のパーセンテージ) を使用して、内部の ".main" div の相対コンテキストを作成します。

「.wrapper:after」疑似要素は、padding-top プロパティを使用して 56.25% のパディング率を確立します。この比率は 16:9 のアスペクト比を表し、「.main」 div が常にそのアスペクト比を維持するようにします。

最後に、「.main」 div はアスペクトを維持しながら「.wrapper」コンテナ全体を埋めます。比率を設定し、ディープスカイブルーの背景と白いテキストを紹介します。

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