症状 こんな感じで余白ができる 解決策 .material-icons { vertical-align: middle; } 解決

解決したい問題 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などの値も使えます。 希望の表示形式に合わせて使い分けしてみてください！

解決したい問題 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などの値も使えます。 希望の表示形式に合わせて使い分けしてみてください！