CSSでMovable Typeをスマートフォンに対応させる その4 "画像の表示サイズ"

  • 投稿日:
  • by
  • カテゴリ:

スクリーンショット

スマートフォン対応させた場合、画像の表示サイズが問題になります。いつも同じサイズで方向も同じであればよいのですが、縦・横混在の場合はなかなか面倒ですが、私のサイトでは次のcssで対応しています。

PC版では幅240px、高さ180pxで表示された画像がスマートフォン版では、冒頭のスクリーンショットのように表示されます。

幅のみを12emで指定し、高さはautoにして表示させています。

p.photo_left img,
p.photo_right img {
  width: 12em;
  height: auto;
}