ForHosting KIT · 画像の編集・解析

CSSアスペクト比からpadding-topを計算

このCSSアスペクト比計算ツールは、幅と高さを従来のレスポンシブボックスで使うpadding-topの百分率へ変換します。16と9のような正の寸法を入力すると、そのままコピーできる文字列を返します。古いスタイルシートの保守、互換用フォールバック、保存済み寸法からの埋め込みメディア枠生成に便利です。計算は決定的で、データを保存せず、ブラウザーとAPIで同じ結果になります。

● Beta無料・ブラウザ内で実行

無料で実行 API仕様を見る

ご利用方法ウェブAPIメールTelegramアプリ近日

寸法をレスポンシブな縦方向の空間へ変換します

CSSでは、縦方向のパディングを百分率で指定すると、包含ブロックの幅を基準に計算されます。この仕組みにより、画像、動画、iframeなどの埋め込み要素が読み込まれる前から必要な高さを確保できます。本ツールは入力された高さを幅で割り、その結果を100倍してパーセント記号を付けます。したがって、一般的な16対9のワイド画面なら、padding-top宣言へ直接入れられる値が得られます。寸法はピクセルである必要も、大きな素材を表す必要もありません。同じ単位を使っていれば、計算を決めるのは比率だけです。1600×900の素材、160×90のサムネイル、16×9の設計枠は、いずれも同じ相対的な空間を確保します。両方の欄には有限の正数をご入力ください。未入力、0、負数、数値でない文字列は、利用できないCSSを生成しないようエラーになります。

CSSフォールバックとして適用します

計算結果は、従来の内在比率ボックスパターンで使用できます。ラッパーのpadding-topに百分率を設定し、ラッパーをposition: relativeにして、子要素が確保済み領域全体を占めるよう絶対配置します。これにより、ラッパーは利用可能な幅に追従しながら、縦方向のパディングで指定比率を保ちます。新しいコードでは、通常は現代的なaspect-ratioプロパティのほうが明確です。それでも、古いスタイルシート、互換性対応、自動生成スニペット、既存方式に統一されたコードでは、パディング方式が役立ちます。返された値は新しい比率ではなくCSS文字列としてお使いください。幅4、高さ3ならその順に入力します。逆にすると縦長の枠になります。本ツールは画像を解析したり向きを推測したりせず、明示された変換だけを予測可能な形で実行します。

寸法の選び方と精度をご確認ください

実在する素材に枠を合わせる場合は、その固有の幅と高さをご使用ください。予定した領域を確保する場合は、設計上の寸法でも構いません。有限の正数であれば大きな値も利用できますが、両方を同じ倍率で縮小しても結果は変わりません。小数にも対応しているため、整数のメディア寸法ではなくレイアウトの実測値から比率を求める場合にも便利です。結果は、一般的なCSSレイアウトに十分な有効精度を保った簡潔な百分率文字列です。ブラウザーは表示幅によってサブピクセルを丸めることがあります。そのため、数学的に正確な値でも、すべての辺が端末の整数ピクセルに一致するとは限りません。これは通常の描画動作であり、比率の変化ではありません。可能であればaspect-ratioを主規則にし、この値はフォールバックとしてご利用ください。APIの決定的な計算は1回$0.002で、ブラウザーでは同じ純粋な計算をローカル実行します。

活用例

レスポンシブ動画の領域を確保

動画の固有寸法をpadding-topへ変換し、プレーヤー読込前のレイアウト移動を防ぎます。

アスペクト比の互換規則を生成

aspect-ratioへ段階移行する間に、パディング方式のフォールバック宣言を作成します。

埋め込みメディアのテンプレートを作成

保存済みの幅と高さから、iframe、画像、部品生成に使える百分率を作ります。

よくある質問

どのような式で計算しますか？

高さを幅で割り、その値を100倍してパーセント記号を付けます。

縦パディングの百分率で比率を保てるのはなぜですか？

CSSでは包含ブロックの幅を基準に計算されるため、縦方向の空間も比例して変化するからです。

padding-topとaspect-ratioのどちらを使うべきですか？

新しいコードではaspect-ratioを推奨します。互換性やフォールバックには計算したpadding-topをご利用ください。

幅と高さに小数を使えますか？

はい。有限で0より大きければ、整数と小数のどちらもご入力いただけます。

寸法が0または負数の場合はどうなりますか？

有効なレスポンシブボックスを定義できないため、入力エラーを返します。

APIリクエストの料金はいくらですか？

APIは1回$0.002です。同じ決定的な計算をブラウザーでもご利用いただけます。

開発者向け — APIアクセス

このページの機能はすべてAPIからも利用できます。自社システムに組み込みたいチーム向けのセクションです。それ以外の方は上のツールをそのままお使いください。

エンドポイント

POSThttps://api.kit.forhosting.com/image/css-aspect-ratio

Bearerトークンで認証し、POST1回でタスクをキューに登録します。結果はWebhookまたは署名付きリンクで受け取れます。

お使いのスタックから呼び出す

curl -X POST https://api.kit.forhosting.com/image/css-aspect-ratio \
  -H "Authorization: Bearer $KIT_KEY" \
  -H "Content-Type: application/json" \
  -d '{"width":16,"height":9}'

const res = await fetch("https://api.kit.forhosting.com/image/css-aspect-ratio", {
  method: "POST",
  headers: {
    "Authorization": `Bearer ${process.env.KIT_KEY}`,
    "Content-Type": "application/json"
  },
  body: JSON.stringify({
    "width": 16,
    "height": 9
  })
});
const { task_id } = await res.json();

import os, requests

res = requests.post(
    "https://api.kit.forhosting.com/image/css-aspect-ratio",
    headers={"Authorization": f"Bearer {os.environ['KIT_KEY']}"},
    json={
    "width": 16,
    "height": 9
},
)
task_id = res.json()["task_id"]

<?php
$res = file_get_contents("https://api.kit.forhosting.com/image/css-aspect-ratio", false, stream_context_create([
  "http" => [
    "method"  => "POST",
    "header"  => "Authorization: Bearer " . getenv("KIT_KEY") . "\r\nContent-Type: application/json",
    "content" => '{"width":16,"height":9}',
  ],
]));
$task = json_decode($res, true);

body := bytes.NewBufferString(`{"width":16,"height":9}`)
req, _ := http.NewRequest("POST", "https://api.kit.forhosting.com/image/css-aspect-ratio", body)
req.Header.Set("Authorization", "Bearer "+os.Getenv("KIT_KEY"))
req.Header.Set("Content-Type", "application/json")
res, _ := http.DefaultClient.Do(req)

リクエスト例

{
  "width": 16,
  "height": 9
}

レスポンス例

{
  "task_id": "tsk_a1b2c3d4e5f6a1b2c3d4e5f6",
  "type": "image.css_aspect_ratio",
  "status": "queued",
  "_links": {
    "result": "/tasks/tsk_…/result"
  }
}

非同期APIです。task_idは即時に返ります。ポーリングは1秒あたり1リクエストまでです。

料金

1リクエストあたり$0.002

単価はすべて公開しています。トークン換算や独自クレジットはありません。失敗したタスクは課金されません。

制限

`max_mb`	15
`max_megapixels`	12

エラー

HTTP	コード	意味
`401`	`unauthorized`	APIキーが無効か、指定されていません。Authorizationヘッダーを確認してください。
`402`	`insufficient_balance`	残高が不足しています。チャージ後に再度お試しください。
`404`	`unknown_type`	指定されたタスクタイプは存在しません。タイプ名を確認してください。
`429`	`rate_limited`	リクエストが多すぎます。しばらく待ってから再度お試しください。

KITの完全なドキュメントを見る →