### 前提・実現したいこと HTML/CSSで作成中のWebページをiPhone6実機にて表示テストをしたところ、画像が縦に伸びる現象が発生しています。（横幅は期待した通りです） iOSにも記述したCSSを適用させる方法が知りたいです。よろしくお願いします。 ### 該当のソースコード ```HTML ``` ```CSS .img-container{ display:-webkit-box; display:flex; justify-content:stretch; } .img-container img{ width:100%; max-width: 100%; height: auto; } ``` ### 試したこと一つの解決策として、imgのwidthとheightのどちらもpxで指定すると伸びは解消されましたが、そうせずともandroid実機や、chrome上では期待した通りの表示がされています。 ### 追記以下のようにコードを修正したところ解決しました。 new1roさん、ありがとうございました！ ```CSS .img-container{ display:-webkit-box; display:flex; justify-content:stretch; align-items: center; } .img-container img{ width:100%; max-width: 100%; height: auto; display: block; } ```

htmlのimg要素がiphone6実機で縦に伸びてしまいます。

前提・実現したいこと

HTML/CSSで作成中のWebページをiPhone6実機にて表示テストをしたところ、
画像が縦に伸びる現象が発生しています。（横幅は期待した通りです）

iOSにも記述したCSSを適用させる方法が知りたいです。
よろしくお願いします。

該当のソースコード

HTML
1<html>
2 <body>
3  <div class="img-container">
4   <img src="../img.jpg">
5  </div>
6 </body>
7<html>

CSS
1.img-container{
2    display:-webkit-box;
3    display:flex;
4    justify-content:stretch;
5}
6.img-container img{
7    width:100%;
8    max-width: 100%;
9    height: auto;
10}

試したこと

一つの解決策として、imgのwidthとheightのどちらもpxで指定すると伸びは解消されましたが、そうせずともandroid実機や、chrome上では期待した通りの表示がされています。

追記

以下のようにコードを修正したところ解決しました。
new1roさん、ありがとうございました！

CSS
1.img-container{
2    display:-webkit-box;
3    display:flex;
4    justify-content:stretch;
5    align-items: center;
6}
7.img-container img{
8    width:100%;
9    max-width: 100%;
10    height: auto;
11    display: block;
12}

new1ro

2020/04/25 11:26

(回答に書くほど根拠がないのでこちらに書きます..) 以下、試してみると、もしかしたらうまくいくかもしれません。 .img-container { display:-webkit-box; display:flex; justify-content:stretch; align-items: center; /* 追加、centerかflex-start */ } .img-container img{ width:100%; max-width: 100%; height: auto; display: block; /* 追加 */ }

ymfdms

2020/04/25 12:09

素早い返答ありがとうございます！ new1roさんのとおり記述したところ、上手く表示がされました！本当にありがとうございました！

kei344

2020/04/25 12:17

まだ質問が「受付中」になっていますが、どのように解決したのかを回答文に書き、「解決済」にされてはいかがでしょうか。

ymfdms

2020/04/25 12:25

kei344さん、ご指摘ありがとうございます！解決方法を記入し、解決済みにしました！

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

回答1件

自己解決

以下のように修正したところ、解決しました！
ありがとうございました！

CSS
1.img-container{
2    display:-webkit-box;
3    display:flex;
4    justify-content:stretch;
5    align-items: center;
6}
7.img-container img{
8    width:100%;
9    max-width: 100%;
10    height: auto;
11    display: block;
12}