画像の表示サイズを変形させずに揃える方法

解決したい問題

Railsでレシピを投稿できるアプリケーションを作成中、360×260の大きさでレシピ画像を表示したかったのですが、イメージタグにサイズ指定をしただけだと、縦長の画像をアップロードした際、画像が変形してしまいました。

xxxx.erb

<%= attachment_image_tag @recipe, :recipe_image, size: '360x260', format:'jpeg' %>

※画像アップロードにはrefileを使用しています

この画像をアップロードすると↓　　　　　　　　　　　変形してしまう↓
　　　　　　　

この問題を解決してくれる便利なCSSプロパティがあったのでご紹介します！

解決方法

object-fitプロパティを使う！

xxxx.erb

<div class="img-container">
  <%= attachment_image_tag @recipe, :recipe_image, format:'jpeg' %>
</div>

application.css

.img-container {
  width: 360px;
  height: 260px;
}
.img-container img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

画像の幅と高さを指定して、object-fit: cover;を追加するだけで中央でトリミングされました！

object-fitプロパティではcover以外に、縦横比を保持してボックスに収まるようにリサイズしてくれるcontainや、リサイズせずにそのまま画像を表示するnoneなどの値も使えます。
希望の表示形式に合わせて使い分けしてみてください！