[方法相談]Railsのjpgがスマホサイトのみ伸びてしまう

前提・実現したいこと

スマホサイト上での埋め込みの画像を正しく表したい

現在とある店舗のホームページを作成しております。
AWSにてデプロイまで完了しております。
PC上では問題なく表示されるのですが、スマホ（iphone)上では高さがうまく表示できずものすごく縦長の画像になってしまいます。

発生している問題・エラーメッセージ

PCスクリーンショット

スマホスクリーンショット

該当のソースコード

haml
1
2  .main_contents
3    .menu_gallery
4      %h4 ギャラリー
5
6      %a{:href => 'https://www.picuki.com/tag/%E4%B8%80%E3%82%84%E3%81%AE%E3%81%94%E3%81%AF%E3%82%93'}
7        .menu 
8          = image_tag 'pic/shopexit', width: '50%'
9          = image_tag 'pic/shopin', width: '50%'
10          
11      %a{:href => 'https://www.instagram.com/explore/tags/%E4%B8%80%E3%82%84%E3%81%AE%E3%81%94%E3%81%AF%E3%82%93/'}
12        .menu
13          = image_tag 'pic/meet2', width: '20%'
14          = image_tag 'pic/meet3', width: '20%'
15          = image_tag 'pic/fish', width: '20%'
16          = image_tag 'pic/toufu', width: '20%'
17          = image_tag 'pic/toufu2', width: '20%'
18
19      .menu
20        %a{:href => 'https://www.picuki.com/tag/%E4%B8%80%E3%82%84%E3%81%AE%E3%81%94%E3%81%AF%E3%82%93', id: "button"}
21          ＞＞もっと詳しく見る

scss
1
2    .menu{
3      height: 100%;
4      display: flex;
5      #button{
6        margin: 20px auto;
7        text-align: center;
8        text-decoration: none;
9      }
10      a:visited{
11        color: #FFB6C1;
12      }
13
14    }

試したこと

heightの仕方に問題があると考えております。
（widthは問題ないため)

heightに100%やautoなどを記載してみましたが変化ありませんでした。
スマホサイト用のページの記載の仕方を検索してみて@media only screenも試してみましたがうまくいきませんでした。

HTMLにwidth記載でPCとスマホ両方’％’で適応されているのでheightに'%'適応でできそうな手応えなのですが値の設定が上手くいっていないのか反映されません。
どなたかご教授お願いいたします。

kei344

2020/06/23 14:45

（質問文は編集できます）teratailでは画像もアップできますので、ご自信で所持されている画像であればそちらを使用されてはいかがでしょうか。（画像として質問文に表示されますし）また、CSSと書かれていますがSCSSなどSassでは？その質問タグも有るので追加することをお勧めします。

takataka3

2020/06/24 00:45

kei344様ご指摘ありがとうございました！画像データを貼り付けとScssへ変更しました。質問タグがCSSしか出来なかったので一旦CSSにて質問タグつけております。

Lhankor_Mhy

2020/06/24 01:25

ご提示のコードを試してみましたが、画像が伸びるなどの問題が再現しませんでした。 ↓サンプル https://jsfiddle.net/Lhankor_Mhy/s9q3bra7/ ご提示いただいていない部分のコードに問題があるのではないかと思います。

Lhankor_Mhy

2020/06/24 01:27

ああ、いやそうか。内在アスペクト比があると変わるのかな……？試してみます。

Lhankor_Mhy

2020/06/24 01:31

やはり問題が再現しませんでした。 ↓サンプル https://jsfiddle.net/Lhankor_Mhy/s9q3bra7/1/

takataka3

2020/06/24 05:12 編集

Lhankor_Mhy様ご指摘ありがとうございます。ご指摘の通りPC上では拡大、縮小しても問題ないのですがスマホサイト上ではどうしても画像が伸びてしまうようです。。。

Lhankor_Mhy

2020/06/24 02:51

viewport が設定されていないのが気になりました。

Lhankor_Mhy

2020/06/24 02:59

うーん、 align-items: flex-start; を入れるとか……？手元に環境がないので、テストしにくいので、推測ですが……

takataka3

2020/06/24 04:04

Lhankor_Mhy様ありがとうございます。 application.haml.htmlにviewport設定してみましたが解決しませんでした。。 !!! %html %head %meta{:content => "text/html; charset=UTF-8", "http-equiv" => "Content-Type"}/ %meta{:content => "width=device-width,initial-scale=1", :name => "viewport"}/

Lhankor_Mhy

2020/06/24 04:11

align-items: flex-start; もだめでしたか？

takataka3

2020/06/24 04:16

align-items: flex-startでもダメでした。。。。

Lhankor_Mhy

2020/06/24 04:29

.menu に align-items: flex-start を付けてもダメ、ということは、コンテナが伸びているのではなくて、img自体が伸びている、ということになるかと思います。なんでだろ……？

takataka3

2020/06/24 05:11 編集

Lhankor_Mhy様ありがとうございます。私も同じ結論でimg自体が伸びてしまっているのだと思います。しかし原因がわからないですよね。。検証ツールでも問題ないのですがデプロイしてスマホで表示しようとするときだけ伸びてしまいます。。 chormeでもsafariでも伸びるので画面の大きさに対する設定だけだと思うのですがなぜでしょう。。

Lhankor_Mhy

2020/06/24 05:14

当方の環境でローカルサーバを立ててiPhoneで試してみましたが、.menu に align-items: flex-start をつけたところ、画像は伸びませんでした。

takataka3

2020/06/24 05:15

Lhankor_Mhy様解決しました！！ heightの記述が間違っていたのかと。 hamlを以下のように記述し直したら画像が伸びずに表示されました。ありがとうございました。 = image_tag 'pic/meet2', width: '20%' = image_tag 'pic/meet2', :width => '20%', :height => '50%'

Lhankor_Mhy

2020/06/24 05:17

あ、その対応でよかったんですね…… heightを指定したくないのかと思っていましたが。ご解決されて何よりです。

takataka3

2020/06/24 05:18

ありがとうございました！！

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

回答1件

自己解決

解決しました！！
heightの記述が間違っていたのかと。
hamlを以下のように記述し直したら画像が伸びずに表示されました。
ありがとうございました。

haml
1 .main_contents
2    .menu_gallery
3      %h4 ギャラリー
4
5      %a{:href => 'https://www.picuki.com/tag/%E4%B8%80%E3%82%84%E3%81%AE%E3%81%94%E3%81%AF%E3%82%93'}
6        .menu 
7          = image_tag 'pic/shopexit', width: '50%'
8          = image_tag 'pic/shopin', width: '50%'
9
10      %a{:href => 'https://www.instagram.com/explore/tags/%E4%B8%80%E3%82%84%E3%81%AE%E3%81%94%E3%81%AF%E3%82%93/'}
11        .menu
12          = image_tag 'pic/meet2', width: '20%'
13          = image_tag 'pic/meet3', width: '20%'
14          = image_tag 'pic/fish', width: '20%'
15          = image_tag 'pic/toufu', width: '20%'
16          = image_tag 'pic/toufu2', width: '20%'
17
18      .menu
19        %a{:href => 'https://www.picuki.com/tag/%E4%B8%80%E3%82%84%E3%81%AE%E3%81%94%E3%81%AF%E3%82%93', id: "button"}
20          ＞＞もっと詳しく見る

変更後

haml
1      %a{:href => 'https://www.picuki.com/tag/%E4%B8%80%E3%82%84%E3%81%AE%E3%81%94%E3%81%AF%E3%82%93'}
2        .menu
3          = image_tag 'pic/shopexit', :width => '50%', :height => '100%'
4          = image_tag 'pic/shopin', :width => '50%', :height => '100%'
5          
6      %a{:href => 'https://www.instagram.com/explore/tags/%E4%B8%80%E3%82%84%E3%81%AE%E3%81%94%E3%81%AF%E3%82%93/'}
7        .menu
8          = image_tag 'pic/meet2', :width => '20%', :height => '50%'
9          = image_tag 'pic/meet3', :width => '20%', :height => '50%'
10          = image_tag 'pic/fish', :width => '20%', :height => '50%'
11          = image_tag 'pic/toufu', :width => '20%', :height => '50%'
12          = image_tag 'pic/toufu2', :width => '20%', :height => '50%'
13
14      .menu
15        %a{:href => 'https://www.picuki.com/tag/%E4%B8%80%E3%82%84%E3%81%AE%E3%81%94%E3%81%AF%E3%82%93', id: "button"}
16          ＞＞もっと詳しく見る