📷

Rails　投稿画像を縦横比(アスペクト比)を保って表示

2023/08/04に公開

やりたいこと

縦長・横長の画像を投稿すると潰れて表示されるため、どうにかしたい。

そもそもアスペクト比って何？から始まった私。
一言で言うと、「横と縦の長さの比率」のこと。

view

<%= image_tag recipe.image, width: 220, height: 160, 
    class: "img-resize, rounded mx-auto d-block", 
    style: "object-fit: cover;" %>

本来、style: "object-fit: cover;"はcssに入力しないといけないらしいが、
入力しても反映されなかったため、上記の位置に入力。

background-repeat: no-repeat;
background-position: center center;
background-size: cover;

この3行で画像が潰されずに表示させるが、ここでobject-fitを使ってみると...

object-fit: cover;

この1行で完了らしい。
え、画期的では？？

ちなみに...