レスポンシブウェブデザインと画像の比率


PCではきちんと表示されるのにモバイルだと画像の縦横比がおかしくなる(縦長になる)現象に悩まされていましたが何とか力技で解決しました。

原因は記事内の画像にstyleが適用されているからじゃないかと思っています。

<img src="http://hoge/hoge.jpg" style="width: 440px; height: 338px;" />

このstyle=の部分を削除して表示してみると縮尺がまともになったからです。しかし、これを全記事削除するのは大変なので、以下のコードをテーマ(子テーマ)のcssファイルに追加しました。

img {
    height: auto !important;
}

!importantをつけることにより、styleの既述があっても最優先でheightがautoになるようにしています。大きな影響が出ると困るので、モバイルアクセスの時だけCSS設定しておく方がリスクが小さいんじゃないかと思います。

参考リンク

 

にほんブログ村 IT技術ブログへ