resize_to_limit(fit) 投稿されたメッセージをビューに表示させる際に、messageとimageが異常に大きい

#今回の問題

chat-space/app/views/messages/_message.html.hamlに

.main-content__chat--contents
  .chat-message
    .chat-message--name
      = message.user.name
    .chat-message--time
      = message.created_at.strftime("%Y/%m/%d %H:%M")
    .chat-message--comment
    - if message.content.present?
      %p.lower-message__content
        = message.content
    = image_tag message.image.url, class: 'lower-message__image' if message.image.present?

と記述し、ビューを表示させると、

imageも大きいが、messageもimageと同じ大きさで表示されてしまう。

#やりたいゴール

ちょうどいい大きさで、messageのみの時は、それ相応の大きさにする

#原因

app/assets/stylesheets/_groups.scssに高さを指定してしまっていた。

&__chat--contents{
    background-color: #fafafa;
    height: 500px;
    padding: 10px 20px;
    overflow: scroll; 

heightをコメントアウトするとmessageのみの表示がちょうどいい大きさに変化した。

しかし画像が馬鹿でかすぎる

#process resize_to_limit: [XXX, XXX]

resize_to_fitは縦横比を維持したまま、width, heightをXXXpxにリサイズしてくれる

app/uploaders/image_uploader.rbに

  process resize_to_limit: [200, 200]

を記述する

#結果

ちょうどいい感じに表示されるようになりました！