画像をトリミングできる object fitプロパティが使える件

『HTMLで表示する画像のサイズを調節したい！ でも、縦横の比率はそのままにしたい！』

というケースは多いと思います。
そんな時はobject-fitプロパティを使いましょう。

元の画像がこんな感じだとします。

この画像を縦300px横500pxで埋め込むとします。

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

サイズは合いましたが、比率は歪んでしまっています。
早速ここでobject-fitを使ってみます。

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

比率が維持されつつ、枠に収まっています。

今回はカバーを指定しましたが、他にも,
fill, contain, none, scale-downなんかがあります。

見てもらったほうが早いんじゃないかと個人的には思います。

fill

文字通り画像がはめ込まれています。

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

contain

元の画像の縦横の比率を維持したまま、左右に余白が生じています。

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


none

指定サイズとは関係なく画像が表示され、残りはトリミングされています。

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

scale-down

画像が指定より大きい場合はcontain,小さい場合はnoneが適用されます。
この場合はnoneですね

img {
  height: 300px;
  width: 500px;
  object-fit: scale-down;
}

今回はobject-noneについてまとめてみました。
まだまだQiitaに慣れず、ブログに結構時間が掛かってしまいます、、、（そもそもブログというものを書く事自体が2回目）

今度はもう少しペースをあげて、アウトプットの効率を高めていきたいものです。