リサイズ方式

リサイズ方式 (Fit & Position)

画像サイズを指定する際に fit と position オプションを組み合わせると、比率の保持方法と切り抜きの基準点を細かく制御できます。

 

fit

説明
リクエストした width・height に合わせて画像をどのように配置するかを定義します。
つまり、「画像を領域にどう合わせるか」 を決めるオプションです。

形式

?fit={type}

サポートされる値

値	説明	特徴
cover	領域いっぱいに埋め、はみ出た部分は切り抜く	サムネイル・バナー向け
contain	画像全体が見えるように縮小（余白あり）	元の比率を保持
fill	比率を無視して領域を正確に埋める	歪む可能性あり
inside	リクエストサイズの内側で最大サイズに調整	拡大を制限
outside	リクエストサイズの外側まで含むように拡張	縮小を制限

 

例

リクエスト	結果
?w=400&h=400&fit=cover	正方形に切り抜く
?w=400&h=400&fit=contain	余白を含め、画像全体を表示
?w=800&h=400&fit=fill	比率を無視して強制的に合わせる

 

position

説明
fit=cover のように画像の一部が切り抜かれるとき、
どの部分を基準に残すか を決めます。

形式

?position={direction}

サポートされる値

値	説明
centre	中央基準（デフォルト）
top	上端基準
bottom	下端基準
left	左端基準
right	右端基準

例

リクエスト	結果
?w=400&h=400&fit=cover&position=top	上側を基準に切り抜く
?w=400&h=400&fit=cover&position=bottom	下側を基準に切り抜く

 

組み合わせて使う

fit と position は組み合わせて使うと最も効果的です。

?w=400&h=400&fit=cover&position=top

• fit=cover: 正方形の領域をいっぱいに埋める
• position=top: 上端を基準に切り抜く

---

💡 Tip:

• fit を指定しない場合は、デフォルト値（通常は cover）が適用されます。
• position は fit=cover のときのみ効果があります。