レスポンシブの画像の大きさを制御するCSSタグが効かない
-
現在、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”」のタグを付けると横幅が画面いっぱいになり、
外すと縦幅が固定されたままで画像がつぶれていく、と、どちらか片方のみになってしまう状態です。この場合には、どのようにすれば元画像より拡大されず、またスマートフォンの画面で画像の縦幅を可変にできますでしょうか?
何か適切な解決策がありましたら、どうぞよろしくお願いいたします。
ヘルプの必要なページ: [リンクを見るにはログイン]
- トピック「レスポンシブの画像の大きさを制御するCSSタグが効かない」には新たに返信することはできません。