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

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

ただいまの
回答率

90.34%

  • Ruby

    8183questions

    Rubyはプログラミング言語のひとつで、オープンソース、オブジェクト指向のプログラミング開発に対応しています。

  • Ruby on Rails

    7667questions

    Ruby on Railsは、オープンソースのWebアプリケーションフレームワークです。「同じことを繰り返さない」というRailsの基本理念のもと、他のフレームワークより少ないコードで簡単に開発できるよう設計されています。

  • HTML5

    4297questions

    HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

  • CSS3

    2209questions

    CSS(Cascading Style Sheet)の第3版です。CSS3と略されることが多いです。色やデザインを柔軟に変更することが可能になります。

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

解決済

回答 2

投稿 編集

  • 評価
  • クリップ 0
  • VIEW 1,317

koume

score 206

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%; /* 画像幅以上拡大しないようにする指定 */
  }
  }
}
  • 気になる質問をクリップする

    クリップした質問は、後からいつでもマイページで確認できます。

    またクリップした質問に回答があった際、通知やメールを受け取ることができます。

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

質問への追記・修正、ベストアンサー選択の依頼

  • kei344

    2017/09/24 13:32

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

    キャンセル

  • koume

    2017/09/24 14:35

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

    キャンセル

  • kei344

    2017/09/24 15:18

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

    キャンセル

  • koume

    2017/09/24 17:16

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

    キャンセル

回答 2

checkベストアンサー

0

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

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2017/09/24 14:24

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

    キャンセル

  • 2017/09/24 15:13

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

    キャンセル

  • 2017/09/24 15:16

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

    キャンセル

  • 2017/09/24 17:17

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

    キャンセル

  • 2017/09/25 15:29

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

    キャンセル

  • 2017/09/30 10:21

    いえいえ

    キャンセル

0

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

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

幅ごとに適切な解像度の画像を出し分けるなら、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 20:41

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

    キャンセル

  • 2017/09/24 21:11

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

    キャンセル

同じタグがついた質問を見る

  • Ruby

    8183questions

    Rubyはプログラミング言語のひとつで、オープンソース、オブジェクト指向のプログラミング開発に対応しています。

  • Ruby on Rails

    7667questions

    Ruby on Railsは、オープンソースのWebアプリケーションフレームワークです。「同じことを繰り返さない」というRailsの基本理念のもと、他のフレームワークより少ないコードで簡単に開発できるよう設計されています。

  • HTML5

    4297questions

    HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

  • CSS3

    2209questions

    CSS(Cascading Style Sheet)の第3版です。CSS3と略されることが多いです。色やデザインを柔軟に変更することが可能になります。

  • トップ
  • Rubyに関する質問
  • Railsで表示画面(ブラウザ)の大きさに合わせて表示画像の大きさをコントロールする方法を教えてください。