[html,css] width:100%なのに画像が横にはみだしてしまう件

Question

見てくださったありがとうございます。 質問です。

現在cssでimgにwidth:100%と指定して横幅に画像をぴったり合わせようとしているのですが、
なぜかiphoneだけうまく画像がぴったり合わず、画像が横に伸びた状態で表示され困っています。

実機での確認状況では Android:問題なし iphone5,6:問題あり
グーグルのコンソールでは Android:問題なし iphone5,6:問題なし

コンソール上ではうまくいってるのですが、実機になると駄目みたいで、paddingとかborderのボックスモデルとかが原因かな？とも思ったのですがそうでもないようで。 もしこれじゃないか？というのがありましたらよろしくお願いします。

Answer 1

ちなみにスマートフォンでゴムボールが潰れた感じになってしまっているということは画像に高さを指定されていませんか？
スマートフォンで画像を表示する場合、widthの幅とかは%指定することが多くなると思われるのでheightは指定しないほうがいいと思います！

自己解決されているのにすいません！

Comments

[nyan_lia]

わざわざコメントありがとうございます。

まだ私が勉強中ということで
こういうコメントはとてもありがたいです。（－人ー）

Answer 2

コメントくださったかたありがとうございました。解決しました。

簡潔にいうと本当はwidth:320px と指定しないといけないところをwidth:480pxとかいていたせいで
画面の横幅が伸びていました。

Answer 3

!important を付けてみてはいかがでしょうか？
他のCSSが適用されていても 強制的に 反映させることが可能です。

Comments

[nyan_lia]

コメントありがとうございます。
それは知りませんでした。早速確かめてみます。

Answer 4

viewportの指定ではないでしょうか？

Comments

[nyan_lia]

コメントありがとうございます。
viewportは大丈夫だと思います。

Answer 5

スクリーンショットを張っていていただけますか？

Comments

[nyan_lia]

コメントありがとうございます。
スクショはちょっと都合上はれないです。すいません。イメージだと
本当は「○」見たいな感じでだしたいのに、ゴムボールを上から少し押さえたような楕円状態で画像が出てしまってる感じです。