異なるウィンドウ サイズに合わせて自動サイズ変更する際に、Div 要素のアスペクト比を維持するにはどうすればよいですか?

さまざまなウィンドウ サイズで Div 要素のサイズを自動変更するためのアスペクト比を維持する

Web 開発では、多くの場合、次のような中央 div を用意することが望ましいです。ウィンドウ サイズの変化に適応しながら、特定のアスペクト比を維持します。ただし、幅と高さの両方の調整に効果的に機能するソリューションを見つけるのは難しい場合があります。

現在のアプローチ

提供された CSS および HTML コードは、次の状態を維持する中央揃えの div を作成します。固定サイズ。ウィンドウ サイズが小さくなると、div は縮小しますが、元のアスペクト比は維持されません。

アスペクト比プロパティを使用した解決策

この問題に対処するには、アスペクト比プロパティを利用できます。このプロパティは現在広くサポートされており、要素の寸法の固定比率を指定できます。

<br>body {<br> height: 100vh;<br> margin: 0;<br> 表示: flex;<br> justify-content: center;<br> align-items:中央;<br> 背景: グレー;<br>}</p>
<p>.stage {<br> --r: 960 / 540;</p>
<p>アスペクト比: var(--r); <br> width:min(90%, min(960px, 90vh*(var(--r))));</p>
<p>display: flex;<br> justify-content: center;<br> align-items:中央;</p>
<p>背景:</p>
<div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false">/* this gradient is a proof that the ratio is maintained since the angle is fixed */
linear-gradient(30deg,red 50%,transparent 50%),
chocolate;

ログイン後にコピー

}

1. 計算アスペクト比: -- r 変数には、希望のサイズの幅 / 高さとして計算されたアスペクト比 (960 / 540).
2. アスペクト比の設定: アスペクト比プロパティは、アスペクト比を計算された値に設定します。これにより、要素が常にその比率を維持するようになります。
3. 幅の計算: width プロパティは、元の幅 (使用可能なウィンドウ幅の 90%) を考慮する min() 関数を使用して設定されます。計算されたアスペクト比の 90vh 倍。この数式により、アスペクト比を維持しながら要素がウィンドウに合わせて縮小されます。
4. Div を中央揃えしてスタイル設定する: div はフレックスボックスを使用して中央に配置され、その背景はグラデーションでスタイル設定されます。要素が縮小してもアスペクト比が維持されることを示します。

このソリューションは、div 要素がそのアスペクト比を維持することを効果的に保証します。幅と高さの両方において、さまざまなウィンドウ サイズに適応しながらアスペクト比を調整します。

以上が異なるウィンドウ サイズに合わせて自動サイズ変更する際に、Div 要素のアスペクト比を維持するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。