ホームページ > ウェブフロントエンド > CSSチュートリアル > CSS を使用して高さに基づいて Div のアスペクト比を維持する方法

CSS を使用して高さに基づいて Div のアスペクト比を維持する方法

Linda Hamilton
リリース: 2024-11-02 05:05:02
オリジナル
629 人が閲覧しました

How to Maintain a Div's Aspect Ratio Based on Its Height Using CSS?

CSS を使用して高さに基づいて Div アスペクト比を維持する

要素の比率を維持する場合、従来の解決策は次のとおりです。垂直パディングのパーセント値。ただし、水平パディングで同じ効果を実現するのはそれほど簡単ではありません。この記事では、高さに基づいて div 要素のアスペクト比を維持するための CSS ベースのアプローチについて説明します。

必要なマークアップ構造は次のとおりです。

<div class="box">
  <div class="inner"></div>
</div>
ログイン後にコピー

アスペクト比を維持するにはでは、CSS のアスペクト比プロパティを活用できます。

<code class="css">.box {
  height: 50%;
  background-color: #3CF;
  aspect-ratio: 2 / 1;
}</code>
ログイン後にコピー

アスペクト比プロパティは、要素の幅と高さの比率を指定します。この場合、2:1 の比率は、幅が高さの 2 倍になることを示します。

親要素 (ボックス) の高さを流動的な値 (例: 50%) に設定し、その高さを調整することで、アスペクト比プロパティを使用すると、幅が高さに比例して拡大縮小することを確認できます。

効果を実証するには、次の HTML および CSS コードを検討してください:

<code class="html"><div class="demo">
  <div class="box">
    <ul>
      <li>This box has fluid height of 50%</li>
      <li>It has an aspect ratio of 2:1</li>
      <li>Resize the container vertically (or horizontally)</li>
      <li>The box will maintain its aspect ratio</li>
      <li>The text content will not affect its width</li>
    </ul>
  </div>
</div></code>
ログイン後にコピー
<code class="css">.demo {
  width: 90vw;
  height: 90vh;
  overflow: auto;
  resize: both;
  outline: 1px solid #999;
}</code>
ログイン後にコピー

コンテナー (.demo) のサイズを変更すると、ボックス (box) が 2:1 のアスペクト比を維持しながら幅を調整することがわかります。このソリューションは、純粋に CSS を通じて要素の望ましい比率を保持するクリーンで効果的な方法を提供します。

以上がCSS を使用して高さに基づいて Div のアスペクト比を維持する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
著者別の最新記事
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート