EPUBで画像の大きさを指定する方法を調べた、の続き

１昨日のEPUBで画像の大きさを指定する方法について、もう少し継続して調べてみました。

XHTMLファイルの構造は次のようになっています。
<div ...>
<img src="画像ファイルへのパス" ... />
</div>

ケース１、ケース３は直接imgに対してwidth属性またはCSSのwidthプロパティで幅を指定しました。この両方ともブラウザやAdobe Digital Editionsでは幅指定が有効になります。これは正常な動作と思います。

ケース２は、img要素の親要素であるdivにwidth属性を指定しました。
ケース４は、img要素の親要素であるdivにCSSのwidthプロパティで幅を指定しました。

ケース２は、ブラウザやAdobe Digital Editionsでは幅指定が無視されます。XHTML1.0の文書型を調べると、width属性を指定できるのは、img、table関連の要素オブジェクト要素などとなっておりdivにはwidth属性は指定できません。従って、divに指定したwidth属性を無視するのは正常と思います。

問題はケース４です。CSSのwidth属性は、CSS2.1仕様をみると「非置換のインライン要素と表の行を除く全て要素に適用できる」とあります。非置換ってわからないのですが、divはインラインではないのでwidthを適用できるはず。で、なぜ、画像の幅が期待通りにならないのか？

調べてみますと、どうやらimgに指定した画像ファイルのもともとの大きさが幅1024ピクセル、高さ768ピクセルと大きいのですが、imgに幅を指定していないので、画像ファイルのサイズのままで表示しているようです。

それで今度はimg幅を明示的に指定してみました。CSSを簡単に書くとこのようになります。

div {
width:30%;
}

img {
width:100%;
}

つまり、imgの親要素のdivに幅を指定し、img自体にはその親要素の表示幅に合わせて画像を表示するように指定します。

そうすると今度はブラウザでもAdobe Digital Editions でも画像が期待した大きさで表示されます。どうもこれが正しいようです。

iBooksはimgにwidthを100%とする明示的な指定がなくても、あるものとして解釈しているようですね。やはりiBooksは特殊というべきでしょうか。

○結論としては、現時点で、ブラウザ、Adobe Digital Editions、iBooks(1.2)で共通になるようなイメージの大きさ指定は、このケース４の方法しかない、ということになりそうです。

（メモ）2012/12/5　
div {
width:65%;
}

div img {
width:100%;
}

とすると、iBooks3でイメージが中央寄せになる。他の図とあわせるにはマージンを調整する。