More than 3 years have passed since last update.

[CSS] 画像の縦横比を維持したまま拡大縮小(リサイズ)する

Last updated at 2020-12-18Posted at 2020-12-18

img {
  width: 300px;
  height: 300px;
}

このままではリサイズしたい画像が横や縦に伸びてしまう場合があります。
画像の縦横比を維持したままリサイズするには
object-fit: cover;
を先ほどのCSSに追加してあげましょう。

img {
  width: 300px;
  height: 300px;
  object-fit: cover;
}

画像は、縦横のうち小さい方を基準にして自動で拡大・縮小されて、はみ出した部分は切り取られます。また、中央の位置で切り取られます。
（object-position: 横の位置縦の位置; で切り取る位置を指定することもできます。）