サポート » 使い方全般 » スマホを縦にしたときにヘッダーの写真がはみ出る。

  • 解決済 takkky

    (@takkky)


    質問させてください!

    テーマ:”I Am One”
    Topページのヘッダーに1497 × 993の画像を2枚使用して、交互にスライド表示しています。
    PCでみるとピッタリなのです。
    スマホ(iPhoneでもandroidでも)で横にしてみると問題ないのですが、縦にするとはみ出してしまします。
    スタイルシートまたは、Header.phpに
    img {
    max-width: 100%;
    height: auto;
    }
    を入れてもダメで、調べて何日も試行錯誤しましたが、ダメです…

    もしお分かりの方がいらっしゃいましたら、ぜひご指南のほどよろしくお願いいたします。

4件の返信を表示中 - 1 - 4件目 (全4件中)
  • こんにちは。
    スマートフォンでも横であれば問題ないということは、メディアクエリーの設定の問題ではと思います。(CSSの問題)

    img {
    max-width: 100%;
    height: auto;
    }

    を記入されたということですが、それは適切なサイズ部分に書き込まれていますでしょうか?

    よろしければ320pxまでの幅の場合に適応される下記コードをStyle.cssの一番下に書き込んで試してみてください。

    @media screen and (max-width: 320px) {
    img {
    max-width: 100%;
    height: auto;
    }
    }

    これでもダメな場合、CSSでimgより強いIDもしくはclassでスライド部分の画像サイズが制御されていることが考えられます。
    CSSで何がその部分に効いているかは、ブラウザのデベロッパーツールなどを使うことにより検証することができます。

    Nukagaさま

    こんにちわ。
    ご回答ありがとうございます!
    ご指示頂いたとおり、Style.cssに書き込んでみたのですが、やはり変わらずでした…

    私も、メディアクエリーの設定では、と思って調べているのですがなかなか有効な手立てが見つかっていません。

    もしヒントになることがございましたら、教えていただけるとうれしいです。

    宜しくお願いいたします。

    こんにちは。
    それであれば、先にも書きましたが、スライドの画像に対してimgよりも優先順位の高いCSSが書かれている可能性があります。
    CSSの問題なのでWordPressからは離れてしまうのですが、そちらは確認されてますでしょうか?
    http://www.stylish-style.com/csstec/base/order.html

    スライドの画像にどんなスタイルシートが適用されているかは、GoogleCromeの場合はデベロッパーツール、Firefoxの場合はFirebugというアドオンを使うことによって調べることができます。

    Nukagaさま

    ご丁寧にありがとうございます!
    わかりやすいサイトです。これから勉強して、改善できるようにやってみようと思います!

    また、結果をご報告させてください。

4件の返信を表示中 - 1 - 4件目 (全4件中)
  • トピック「スマホを縦にしたときにヘッダーの写真がはみ出る。」には新たに返信することはできません。