Cssのアスペクト比
無料でオンラインで利用可能 Cssのアスペクト比 インストール不要のツール
CSS アスペクト比について
このツールは、幅:高さのアスペクト比に対する CSS を、モダンな `aspect-ratio` プロパティまたは従来のパーセンテージ padding ハックのいずれかを使用して生成します。一般的な比率プリセット、カスタムの幅/高さ入力（1-100）、ライブプレビューボックス、コピー可能な出力を提供します。プレビューは選択したメソッドに応じてレンダリングを切り替えるため、各技術が何を生成するか正確に確認できます。
使い方
1. Common Ratio プリセット（16:9、4:3、1:1、21:9、3:2、2:3、9:16）をクリックするか、カスタムの Width と Height（1-100）を入力します。 2. Method を選択：Modern（`aspect-ratio`）または Padding Hack。 3. Preview ボックスが選択した技術で比率をレンダリングします。 4. Output カードで Copy をクリックして生成された CSS をコピーします。
メソッドと生成される CSS
Modern は 1 行を出力します：`aspect-ratio: <width> / <height>;`。Padding Hack は `position: relative; width: 100%; padding-top: <height/width*100>%;` を持つ `.container` と、それを満たす絶対配置の `.content` を出力します。これは `aspect-ratio` をサポートしない環境向けのレガシー技術です。プレビューは同じスタイルを使用し、最大幅を 400px に制限するため、視覚結果は CSS が記述する技術と一致します。
▶Modern の代わりに Padding Hack を使うべきなのはいつですか？
▶幅と高さの入力が受け付ける範囲は？
▶ツールは CSS だけでなく HTML も出力しますか？
▶なぜ 2 つのメソッドでプレビューが異なるのですか？
このツールがあなたに役立ったなら、私にコーヒーをご馳走することをお勧めします。
私にコーヒーを買ってください。