【Rails5】画像サイズ変更

carrierwaveとmini_magickで画像をアップロードさせたけど、画像サイズが変更できなかったので、再ミス防止も兼ねて解決策を以下に書いていきます。
※carrierwaveとmini_magickによる画像アップロード方法に関しては、ここでは記載しておりません。

問題

レシピ詳細ページのView作成段階

show.html.erb

<div class="recipe_detail">
  <h3><%= @recipe.title %></h3>
  <div class="row">
    <div class="col-md-5 recipe_content1">
      <%= image_tag @recipe.image.url %>
    </div>
    <div class="offset-md-1 col-md-6 recipe_content2">
      <h5>ポイント</h5>
      <div class="catchcopy"><%= @recipe.catchcopy %></div>
      <h5 class="no_of_dish">材料(<%= @recipe.no_of_dish %>)</h5>
      <table class="table ingredients">
        <% @recipe_ingredients.each do |ingredient| %>
          <tr>
            <td><%= ingredient.ing_name %></td>
            <td class="text-right"><%= ingredient.quantity %></td>
          </tr>
        <% end %>
      </table>
    </div>
  </div>
</div>

上記のように記載すると、以下のように@recipe.image.urlのサイズがcol-md-5の範囲を超えてしまいます。

試したこと

そこで、他の記事に記載されていたような以下の方法を試してみましたが、表示は変わりませんでした。

トライ１

image_tagメソッド内にwidthタグを入力

<%= image_tag @recipe.image.url, width: "300px" %>

トライ２

image_uploaders.rbのprocess resize_to_limitのサイズを変更

uploarders/image_uploaders.rb

process resize_to_limit: [300, 300]

解決策

シンプルですが、以下のようにしたらちゃんと画像のサイズ変更できました。

show.html.erb

<%= image_tag @recipe.image.url, class: "recipe_image" %>

image_tagにclassを入力

application.css

.recipe_image{
  width: 100%;
}

application.css内でサイズ指定

ちゃんと綺麗にcol-md-5の枠におさまりました。

単純なことかもしれませんが、参考になりましたら幸いです。