画像のリサイズ寸法の計算
元の画像の横・縦の画素数と、リサイズしたい横・縦を入れると、縦横比を保ったままの大きさと切り抜く量を計算します。方式は「収める（余白ができる）」と「埋める（はみ出す分を切り抜く）」の2つです。
px
px
くわしい条件を変える（なくても計算できます）
px
px
PR
計算方法
収める（contain） 倍率 ＝ min(指定の横 ÷ 元の横, 指定の縦 ÷ 元の縦)。小さいほうの倍率を使うことで、画像全体が指定サイズの中に収まります。
埋める（cover） 倍率 ＝ max(指定の横 ÷ 元の横, 指定の縦 ÷ 元の縦)。大きいほうの倍率を使うと画像が指定サイズより大きくなるので、はみ出した分を切り取ります。
例：4000×3000pxの画像を800×600pxに「埋める」場合。倍率はmax(0.2, 0.2)＝0.2倍で、縮小後はちょうど800×600pxになり、切り取る量は0です（縦横比が同じため）。
出典：W3C「CSS Images Module Level 3」（object-fitのcontain・coverの定義）
PR
PR
よくある質問
「収める」と「埋める」はどう違う？
「収める」は画像全体を必ず表示しますが、余白ができることがあります。「埋める」は指定した大きさをすきまなく埋めますが、はみ出した部分は切り取られます。ウェブのCSSのobject-fitのcontain・coverと同じ考え方です。
切り抜く位置はどうやって決まる？
はみ出した分を、上下（または左右）のどちらから多く切るかで決まります。「中央」を選ぶと、はみ出した分を半分ずつ切ります。
画像が指定サイズより小さいときは？
この計算では、小さい画像を拡大する場合も同じ式で計算します。大きく拡大すると、画質が粗くなることがあります。
PR
よく一緒に使われる計算
同じ分野のほかの計算
PR
