Adobe Digital Editions 画像表示サイズの奇妙な現象
昨日、「iBooksとAdobe Digital Editionsの画像表示動作の違いにご注意」（http://d.hatena.ne.jp/cassupport/20110512/1305162472）という日記をかいたのですが、制作された大石さんから次のようなコメントをもらいました。
『CSSに「img {width:100%;}」と追加してみました。一見大丈夫なようですが、画面サイズを左右に広げた場合、Adobe Digital Editionsでは2段組となり、firefoxのアドオンEPUBreaderではどこまでも画面に追随するため偏平な画像になってしまいます。』
まず、前段の画面サイズを左右に広げたときの話ですが、Adobe Digital Editionsでは文字を小さくするとか、あるいは、表示幅を広くすると2段組で表示するのが通常動作のようです（Windows版で確認）。Sony Readerなどでは画面のサイズが決まっていますので問題ないのではないでしょうか。
firefoxのEPUBreaderで画面幅に追随して扁平になるのを避けるには、max-width:100% とすれば良いようです。max-widthに対する動作もEPUBReaderで少し違うようなのでこのあたりはまた調べてみようと思います。
それと関係して、Adobe Digital Editionsの画像サイズに関する奇妙な動作に嵌ってしまいました。
※バージョンは1.7.2.1131（Windows7）の環境です。
先日、次のように書きました。
-
-
-
-
- -
-
-
-
div {
width:30%;
}
img {
width:100%;
}
imgの親要素のdivに幅を指定し、img自体にはその親要素の表示幅に合わせて画像を表示するように指定するとiPadでも、Adobe Digital Editionsでも画像の表示サイズが同じになります。
-
-
-
-
- -
-
-
-
（http://d.hatena.ne.jp/cassupport/20110426/1303775762）
ところが今日同じ様なファイルを作ってみたところAdobe Digital Editionsでそうならないのです。
○divにwidth:50%;を指定したつもりなのに次のようになってしまいます。
(Windowの幅の半分(50%)のサイズで表示して欲しいのに100%の幅で表示する、という現象）。
※スタイルシートの内容（一部）
/* test */
.fig {
width: 50%;
}
img.case-2 {
width:100%;
}
img.case-3 {
max-width: 100%;
}
これはおかしいと思い、さんざん調べました。でたまたま指定の順序を入れ替えたのです。
※スタイルシートの内容（一部：変更後）
/* test */
img.case-2 {
width:100%;
}
img.case-3 {
max-width: 100%;
}
.fig {
width: 50%;
}
○今度はなんと次のようになってしまいます。2枚目は期待通りになりますが1枚目が画像本来のサイズのままになってしまっています。
1枚目
2枚目
Adobe Digital Editions はスタイルシートの指定順序で画像の大きさが変わってしまいます。
ブラウザ（ForefoxやそのEPUB Readerプラグイン）では２つの画像の両方とも画面サイズの50%の幅で表示されます。
この現象はどういうことなんでしょうかね。まだ原因は分かっていません。誰か知っている人いませんか。
※データファイルはこちらのブログにあります。
http://blog.antenna.co.jp/ILSoft/2011/05/adobe_digital_editions.html
