サポート » その他 » レスポンシブの画像の大きさを制御するCSSタグが効かない

  • 解決済 dataring

    (@dataring)


    現在、AMPのプラグインを有効化したページで、AMP専用の、

    <p><amp-img src=”” title=”” alt=”” width=”” height=”” layout=”responsive”></amp-img></p>

    のタグを使用して画像ファイルを表示してみましたところ、「layout=”responsive”」のタグを付けると、
    PCのモニターでページを閲覧する時に、レスポンス自体は機能しているのですが、
    そこかわりに画面いっぱいの横幅にまで、過剰に広がってしまう状態になりました。

    そこで、テーマの「style.css」に、
    p img {max-width:100%; height:auto;} のタグを貼り付けてみたのですが、
    画像のサイズは拡大されたままで、なぜか「max-width:100%;」が効かない状態でした。

    次に、「layout=”responsive”」のタグを一度外してみたら、画像の最大の横幅は元画像の数値から拡大されなくなって、横幅もスマートフォンのページで縮小されるようになりました。

    ですが、今度は縦幅の数値が固定されたままになり、CSSの「height:auto;」が効かず、スマートフォンから見ると、画像が縦につぶれた状態になります。

    「layout=”responsive”」のタグを付けると横幅が画面いっぱいになり、
    外すと縦幅が固定されたままで画像がつぶれていく、と、どちらか片方のみになってしまう状態です。

    この場合には、どのようにすれば元画像より拡大されず、またスマートフォンの画面で画像の縦幅を可変にできますでしょうか?

    何か適切な解決策がありましたら、どうぞよろしくお願いいたします。

    ヘルプの必要なページ: [リンクを見るにはログイン]

1件の返信を表示中 - 1 - 1件目 (全1件中)
  • トピック投稿者 dataring

    (@dataring)

    画像ファイルのソースに「layout=”intrinsic”」のタグを貼ることで、自己解決できました。

    それでは、またよろしくお願いいたします。

1件の返信を表示中 - 1 - 1件目 (全1件中)
  • トピック「レスポンシブの画像の大きさを制御するCSSタグが効かない」には新たに返信することはできません。