Welcome

カキノタ:IT-Life

パソコンやインターネット生活についてのブログ

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

投稿日:2016-06-09

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

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

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

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

img {
    height: auto !important;
}

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

参考リンク