CSSアスペクト比計算機

アスペクト比は、要素の幅と高さの比例関係を表します。16:9 のようにコロンで区切った二つの数で記し、両寸法を同じ倍率で拡大・縮小しても変わりません。ウェブ開発では、画像、動画、埋め込み、カード、レスポンシブな部品の読み込み前に安定した領域を確保するために使います。この計算機は任意の整数寸法の組を約分し、対応する現代的な CSS 宣言を生成します。 約分には幅と高さの最大公約数を使います。1920 × 1080 の最大公約数は 120 です。両方を 120 で割ると 16 × 9 になります。小数値は幅を高さで割ったもので、16:9 は約 1.7778 です。CSS の aspect-ratio プロパティには約分後の数も元の寸法も使えますが、約分した値の方が認識や確認が容易です。生成した宣言は画像ラッパー、動画枠、グリッドアイテムなどのボックスのスタイル規則に貼り付けられます。 aspect-ratio は望ましい比率を指定するプロパティです。幅が確定して高さが自動なら、ブラウザーは比率から高さを求めます。高さが確定して幅が自動なら、幅を求められます。両方の寸法が明示的に固定されている場合、比率はそれらを上書きしません。内容、最小・最大サイズ、ボックスサイズの計算方法、レイアウト制約も最終寸法に影響します。width: 100% とアスペクト比の組み合わせは、レスポンシブなメディアコンテナーを作る一般的な方法です。 アスペクト比と解像度は別物です。1280 × 720 と 3840 × 2160 の画像はどちらも 16:9 ですが、画素数は大きく異なります。比率は形を決め、解像度は細部、ファイルサイズ、表示密度に影響します。別の比率に切り抜くと内容が失われますが、形の異なるボックスに全体を収めると余白が生じる場合があります。CSS object-fit の cover や contain は、確保したボックス内で置換コンテンツをどう表示するかを決めます。 レイアウトシフトを防ぐには、元の素材が持つ固有寸法を使ってください。HTML の width と height 属性があれば、レスポンシブ CSS で表示サイズが変わってもブラウザーは比率を推定できます。構図に応じて画像を切り替える場合や特殊なブレークポイントでは、選択される各画像が意図した構図か確認してください。この計算機は比率だけを扱うので共通の任意単位を使えますが、最大公約数で正確に約分し、明快で予測可能な比率を得るため整数を求めます。