Railsで表示画面（ブラウザ）の大きさに合わせて表示画像の大きさをコントロールする方法を教えてください。

Rails5.1.3でアプリケーションプログラミングの勉強中です。あるページで画像を表示しています。
表示画面のコードは以下です。

<% @title = 'ニュース' %>
<h1><%= @title %></h1>

  <p>魚釣り
  <%= image_tag("owl-308773_640.png", size: "60*60", alt: "魚", align: "top") %></p>
  <h2>釣った魚です。</h2>
  
<div class="table-wrapper">
  <div class="links">
    <%= link_to 'よくある質問へ戻る', :question_customer_rule %>
  </div>
</div>

単純に画像の表示コードです。この状態でPC画像に画像（owl-308773_640.png）が表示されています。
このままだとブラウザの画面サイズにあわせて表示サイズが変わってくれないので画面サイズが小さくなるにつれ
画像全体が表示されず、右側から隠れてしまい隠れた部分を見るために画面をスライドして見る必要があるので見づらい画面になっています。
この画像のサイズをブラウザの大きさに合わせて表示させるにはどのようなコードを作ればいいのでしょうか？
HTMLでは出来ないと思うのでCSSで操作する必要があると思うのですが、記述方法がわからないので教えていただけないでしょうか？
たぶん、以下のコードを<div id="＊＊＊"> ～</div>で囲んでCSS側に記述してコントロールするのかな？と思っております。
<%= image_tag("owl-308773_640.png", size: "60*60", alt: "魚", align: "top") %>
どなたか詳しい方、教えてください。宜しくお願いいたします。

追記：ソースを記載させていただきます。

<!DOCTYPE html>
<html>
<head>
  <title>ニュース - Chibi</title>
  <link rel="stylesheet" media="all" href="/assets/jquery-ui/theme.self-830c3407ba1359ea36eee978235be14de5b78dacfa658a31226fe4f2b0faa7e7.css?body=1" data-turbolinks-track="true" />
<link rel="stylesheet" media="all" href="/assets/jquery-ui/core.self-e4bdefd3813c8a715955a6c65b9e730846dcae6a0576618563d635ff0b18a3ca.css?body=1" data-turbolinks-track="true" />
<link rel="stylesheet" media="all" href="/assets/jquery-ui/accordion.self-aa0730fc025317fed4feff2aa5fc07cba5a545dfc5c913a2984ba6f8695b29fb.css?body=1" data-turbolinks-track="true" />
<link rel="stylesheet" media="all" href="/assets/jquery-ui/autocomplete.self-f0b810a4a7bb8c90994675d7c5bfe636d615a5785cf81cae3340aa5e6adc55ca.css?body=1" data-turbolinks-track="true" />
<link rel="stylesheet" media="all" href="/assets/jquery-ui/button.self-c459cf02498a2311af9ededbe220879035792a81f5f8478d47edd8f9aa202be2.css?body=1" data-turbolinks-track="true" />
<link rel="stylesheet" media="all" href="/assets/jquery-ui/checkboxradio.self-98c7262aff3710f07beb8142dc6fb7c88ef0596dedb7909984e5554e06450760.css?body=1" data-turbolinks-track="true" />
<link rel="stylesheet" media="all" href="/assets/jquery-ui/controlgroup.self-5f4cfb6eb047fc4a163c63848156a4bf2dc4daf33358aff3aa63fa10a31f9011.css?body=1" data-turbolinks-track="true" />
<link rel="stylesheet" media="all" href="/assets/jquery-ui/datepicker.self-3047420a03ae2233615bf455c1e7804ce8804db93879fcdcd757f73ce60ebec1.css?body=1" data-turbolinks-track="true" />
<link rel="stylesheet" media="all" href="/assets/jquery-ui/dialog.self-cfc405a38e0296def8d55cc92cac53d0a2006709b2376a36a31d2f31e5fa839d.css?body=1" data-turbolinks-track="true" />
<link rel="stylesheet" media="all" href="/assets/jquery-ui/draggable.self-37c2539362d9d0af129d37fb409f6c33f35d75492c61c05a8dc4f278a0d9057f.css?body=1" data-turbolinks-track="true" />
<link rel="stylesheet" media="all" href="/assets/jquery-ui/menu.self-5bc653bb1a86d1ac2565267f7c29a590fb1b07b9abc75d696d18408c376fa1e1.css?body=1" data-turbolinks-track="true" />
<link rel="stylesheet" media="all" href="/assets/jquery-ui/progressbar.self-1b6f4c0b705f8fa475f566643777a7a62dc3bcad5e8d8c8b7a643226827a35f7.css?body=1" data-turbolinks-track="true" />
<link rel="stylesheet" media="all" href="/assets/jquery-ui/resizable.self-664ac62d66e39e618f230faeba7e4745104a6217009c0f02a5ef78d00146c9b8.css?body=1" data-turbolinks-track="true" />
<link rel="stylesheet" media="all" href="/assets/jquery-ui/selectable.self-19c99ff0e762c31563133c19f00eaea0c6901bc26757751c8eef675ef117a977.css?body=1" data-turbolinks-track="true" />
<link rel="stylesheet" media="all" href="/assets/jquery-ui/selectmenu.self-4c64fa52068bb0ab5ab7beee995fb73714c5cfb571e1a9878ae67d4221ba62ad.css?body=1" data-turbolinks-track="true" />
<link rel="stylesheet" media="all" href="/assets/jquery-ui/sortable.self-cfd0c3e3334e30aac7be47a8577778f43a41d737fd78981dca9f2ebc05351c31.css?body=1" data-turbolinks-track="true" />
<link rel="stylesheet" media="all" href="/assets/jquery-ui/slider.self-4eeb158ab946298510cd1c33edbbb15be2310642f056555b156e27417fdd85bc.css?body=1" data-turbolinks-track="true" />
<link rel="stylesheet" media="all" href="/assets/jquery-ui/spinner.self-7031500c1e002a164c88716bc7e947a35bf63ac016274357338097bf35cab77d.css?body=1" data-turbolinks-track="true" />
<link rel="stylesheet" media="all" href="/assets/jquery-ui/tabs.self-d3e3dd1ce30228648f314c5c5bb8c40cb8aecdad4bbda8d1b1eb8eb496cda303.css?body=1" data-turbolinks-track="true" />
<link rel="stylesheet" media="all" href="/assets/jquery-ui/tooltip.self-a7e58af2915ed216ce5a397dbe7db194a5c1d51e8876136cae3903d9ae41c6d9.css?body=1" data-turbolinks-track="true" />

<link rel="stylesheet" media="all" href="/assets/customer/divs_and_spans.self-9dd724e604abdabb8b5132364e989f313e808b2da72a77bbdd302109da094300.css?body=1" data-turbolinks-track="true" />
<link rel="stylesheet" media="all" href="/assets/customer/flash.self-f380a8791a2a53f3c3fa824608fbc11bc5ae698fabd178090d8d28c1e28c9c20.css?body=1" data-turbolinks-track="true" />
<link rel="stylesheet" media="all" href="/assets/customer/form.self-7329014732f27f4c7610ce38200ec6c68b480f5b87472d0b3a712119d1f11ce1.css?body=1" data-turbolinks-track="true" />
<link rel="stylesheet" media="all" href="/assets/customer/layout.self-03feeeba8e9f5d6601938c005c53b9773b3218533650115c2b31ad67b04caff8.css?body=1" data-turbolinks-track="true" />
<link rel="stylesheet" media="all" href="/assets/customer/pagination.self-28028b5ee42b4f53f8dae372fa23ba64e58f626f3134799e19e0e2ed4764b791.css?body=1" data-turbolinks-track="true" />
<link rel="stylesheet" media="all" href="/assets/customer/sessions.self-39c8d67e6a77381529b73a0dbee184bad9a097d43954a2820b847a91de08a7ad.css?body=1" data-turbolinks-track="true" />
<link rel="stylesheet" media="all" href="/assets/customer/tables.self-2e9309b86c65c8bd55be31998771fb91190a163eefd34e102c953f9662627ccb.css?body=1" data-turbolinks-track="true" />
<link rel="stylesheet" media="all" href="/assets/customer.self-72cef24f6d2b0bf68825925888b5c699c5ed400a0d9274ad476652e664cfde95.css?body=1" data-turbolinks-track="true" />
  <script src="/assets/jquery.self-bd7ddd393353a8d2480a622e80342adf488fb6006d667e8b42e4c0073393abee.js?body=1" data-turbolinks-track="true"></script>
<script src="/assets/rails-ujs.self-661556f443fbae7f6cec8f2cd394aa5e8186cb3f96aded9628126d3484eaa71a.js?body=1" data-turbolinks-track="true"></script>

<script src="/assets/jquery-ui/jquery-1-7.self-22c197e38fc01a29431530c4c5c7263e26d2b611994b1f9c5c8c900a97b4bc44.js?body=1" data-turbolinks-track="true"></script>
<script src="/assets/jquery-ui/plugin.self-d8f576c8e073ca51f095505f47bd09d306b875404cd90afcbb6338287cfb0247.js?body=1" data-turbolinks-track="true"></script>

<script src="/assets/jquery-ui/position.self-1b49c8c521e67a4a88bfdad6b4d944d33686d25009a0e40a1e170acdd7b6962a.js?body=1" data-turbolinks-track="true"></script>
>
<script src="/assets/jquery-ui.self-d4c1ae19d9b853ec1c8c83784fa979bbe4075a84932a080bbd7d7706240410e1.js?body=1" data-turbolinks-track="true"></script>
<script src="/assets/tag-it.self-ccfa6fe5ebee9a806f00ca9e8a45f5e2299922093c7664de7838e2b13af24f8d.js?body=1" data-turbolinks-track="true"></script>
<script src="/assets/turbolinks.self-1d1fddf91adc38ac2045c51f0a3e05ca97d07d24d15a4dcbf705009106489e69.js?body=1" data-turbolinks-track="true"></script>

<script src="/assets/customer/account_form.self-f3bb442ed94637b35e7ab4a15aff8ee972e261c3a732156cfd9992ad79dfa7f0.js?body=1" data-turbolinks-track="true"></script>

<script src="/assets/customer.self-5c210454b1facc1e317a759f6059324f793841eb23d1f549179b64d1584c55f8.js?body=1" data-turbolinks-track="true"></script>
  <meta name="csrf-param" content="authenticity_token" />
<meta name="csrf-token" content="SuyhzFXaFeLDbrek5NA5crleSYc/bWofWwuUugvYpqyx2BaHYw4NBOB4C9BifUD5Dg9Yx3IidvImiAuKmDsycA==" />
</head>
<body>
  <div id="wrapper">
    <header>
  <a class="logo-mark" href="/mypage">CHIBI</a>
  
  
  <a rel="nofollow" data-method="delete" href="/mypage/session">ログアウト</a>
  <a href="/mypage/account">アカウント</a>
  <a href="/mypage/messages/new">問い合わせ</a>
</header>
    <div id="container">
      <h1>ニュース</h1>

  <p>魚釣り
  <img alt="魚" align="top" src="/assets/owl-308773_640-1c01a65459a1f8f98381d5ddf9e1e19a0c254c69a57bd389bbb0e8ddfc137d24.png" /></p>
  <h2>釣った魚です。</h2>
  
<div class="table-wrapper">
  <div class="links">
    <a href="/mypage/rule/question">よくある質問へ戻る</a>
  </div>
</div>
    </div>
    <footer>
  <p>Powered by CHIBI &copy; 2017 Wonder Gate</p>
</footer>
  </div>
</body>
</html>

追記2：

@import 'colors';
@import 'dimensions';

div#wrapper {
  div#container {
    h1 {
      margin: 0;
      padding: $moderate * 1.5 $moderate;
      font-size: $large;
      font-weight: normal;
      background-color: $very_dark_yellow;
      color: $light_gray;
    }
  img {
     width: 100%;
     max-width: 100%; /* 画像幅以上拡大しないようにする指定 */
  }
  }
}

kei344

2017/09/24 04:32

出力されたHTML（ブラウザで「ページのソースを表示」）を質問文に追記ください。

koume

2017/09/24 05:35

連絡が遅くなりすいません。HTMLのソースコードを追記させていただきました。宜しくお願いします。

kei344

2017/09/24 06:18

こちらの環境では変更／修正が確認できませんでした。すみませんが、もう一度確認してもらえませんか？最近teratailで修正が保存されない事がたまにあるようなので･･･。

koume

2017/09/24 08:16

コード量が多すぎて送信出来ていなかったです。すいません。関係のないよう名所を削除して送らせていただきました。宜しくお願いします。

行動規範の内容に同意します

回答2件

#container 内に横幅いっぱい、というのであれば下記のようにすればできるとおもいます。

CSS
1#container > img {
2    width: 100%;
3    max-width: 100%; /* 画像幅以上拡大しないようにする指定 */
4}

幅ごとに適切な解像度の画像を出し分けるなら、srcsetを使うか画像自体を picture要素で出力するかでしょうか。（ Rails で picture要素の使い方は詳しくないのでちょっとわかりません）

【なんでもかんでも<picture>要素を使えばいいわけじゃない！レスポンシブ・イメージ実装の際の注意点 – Rriver】
http://parashuto.com/rriver/responsive-web/picture-srcset-use-case

srcsetは使えるようです。

【Ruby on Rails - railsのimage_tagでsrcsetは使えるのか(17743)｜teratail】
https://teratail.com/questions/17743

【Responsive images helper using srcset in Rails · GitHub】
https://gist.github.com/mrreynolds/4fc71c8d09646567111f

追記：

CSSについて、Webの情報を読む前に一度本屋で入門書から上級まで何冊か本を買って読むと今後の理解が進むと思います。とりあえず最初はわからないことのほうが多いと思いますが、そのうち腑に落ちることも多いはずなのでお勧めします。

HTML/CSS/JavaScriptについてはデベロッパーツールを確認しながら修正してみてください。

【開発者ツールを使おう！カスタマイズするphpファイルを探す-その1 | RYUS blog】
http://ryus.co.jp/blog/customize-php-search-1/

【Web開発でよく使う、特に使えるChromeデベロッパー・ツールの機能 - Build Insider】
http://www.buildinsider.net/web/chromedevtools/01

【第1回　詳説：デベロッパーツールの使い方：Google Chrome版Firebug：デベロッパーツール取扱説明書｜gihyo.jp … 技術評論社】
http://gihyo.jp/dev/feature/01/devtools/0001?page=2

投稿2017/09/24 08:45

編集2017/09/24 11:50

kei344

総合スコア69407

koume

2017/09/24 11:41

いろいろ調べて回答をくださりありがとうございます。初心者なので教えてください。HTMLはそのままでいいのでしょうか？container.css.scssは作成済みですがそこに教えていただいたコードを記述すればいいのでしょうか？コードを追記させていただきますので見ていただけないでしょうか？

koume

2017/09/24 12:11

ありがとうございます。ご指導のとおり入門書・参考書を再度よく読んでみます。デベロッパーツールについて詳しく説明されているサイトまで教えていただきありがとうございました。またわからないことがありましたら質問させていただきますのでその節は宜しくお願いします。

行動規範の内容に同意します

ベストアンサー

なぜRubyで書いてるのでしょうか。単純にHTMLで表示させてCSSでサイズ調整すればいいのでは。

投稿2017/09/24 01:44

s0ra

総合スコア62

koume

2017/09/24 05:24

ご返事が遅くなりすいません。他の部分でデータベースを使ってデータの表示や取り出し等を行っているので Rubyで書いています。

s0ra

2017/09/24 06:13

なるほど。そう言うことでしたか。写真のサイズを調整したいなら https://mae.chab.in/archives/2749 上記のサイトをご覧ください。聞きたいのはこれじゃねぇ！！！って感じだったらまたご連絡ください。

s0ra

2017/09/24 06:16

これじゃない気がしてきたので別の方法も教えます() http://www.united-bears.co.jp/blog/archives/1123 この方法は画面のサイズによってCSSを変える方法で、この方法使えばいいかと。

koume

2017/09/24 08:17

回答ありがとうございます。教えていただいた通りやってみます。わからないところがあったらまた問い合わせ指せていただきますので宜しくお願いします。

koume

2017/09/25 06:29

ありがとうございました。上手くサイズの切り換えが出来ました。今後とも宜しくお願いします。

s0ra

2017/09/30 01:21

いえいえ

行動規範の内容に同意します

あなたの回答

tips

プレビュー

行動規範の内容に同意します

質問の解決につながる回答をしましょう。サンプルコードなど、より具体的な説明があると質問者の理解の助けになります。また、読む側のことを考えた、分かりやすい文章を心がけましょう。

15分調べてもわからないことは
teratailで質問しよう！

ただいまの回答率
85.48%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう！

Railsで表示画面（ブラウザ）の大きさに合わせて表示画像の大きさをコントロールする方法を教えてください。

関連した質問