max-widthとアスペクト比

iPhone KReader

記事表示画面で画像の表示が横にはみ出さないように、画像のmax-widthプロパティを指定している。
この制限で画像が縮小表示されるときには、普通は縦横のアスペクト比を保った形になる筈だと思うが、記事表示に使用しているUIWebViewクラスではそうならない。縦が長いままになってしまう。簡単なテストページを作って、iPhoneのSafariではどうなるかを確認してみると、アスペクト比を保った状態で表示されていた。SafariとUIWebViewクラスは同じエンジンを使用しているのではないかと思っていたが、何故挙動が違うのかよくわからない。

この問題は放置しようかと思ったが、AeroReaderはアスペクト比を保って表示している。流石にAeroReaderは隙のないアプリ。ホリエモンが使っているのも当然。

HTMLとCSSだけで対処する方法が思いつかなかった(方法が無い？)ので、JavaScriptで対処するようにした。

<html>
<head>
<style type="text/css">
img { visibility: hidden; }
</style>
<script type="text/javascript">
  function body_loaded() {
  images = document.getElementsByTagName('img');
  for (i = 0; i<images.length; i++) {
    var m = images[i];
    if (m.width > 300) {
      var r = 300.0/m.width;
      var h = m.height;
      m.width *= r;
      m.height = h*r;
    }
    m.style.visibility = 'visible';
  }
}
</script>
</head>
<body onload="body_loaded();">
<img src="20091214.jpg" />
</body>
</html>


うまくいったみたい。
20091219110039