EPUBで画像の大きさを指定する方法について、続きです

1昨日のEPUBで画像の大きさを指定する方法について、もう少し継続して調べてみました。
XHTMLファイルの構造は次のようになっています。
<div …>
<img src="画像ファイルへのパス" … />
</div>
ケース1、ケース3は直接imgに対してwidth属性またはCSSのwidthプロパティで幅を指定しました。この両方ともブラウザやAdobe Digital Editionsでは幅指定が有効になります。これは正常な動作と思います。
ケース2は、img要素の親要素であるdivにwidth属性を指定しました。
ケース4は、img要素の親要素であるdivにCSSのwidthプロパティで幅を指定しました。
ケース2は、ブラウザやAdobe Digital Editionsでは幅指定が無視されます。XHTML1.0の文書型を調べると、width属性を指定できるのは、img、table関連の要素オブジェクト要素などとなっておりdivにはwidth属性は指定できません。従って、divに指定したwidth属性を無視するのは正常と思います。
問題はケース4です。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に100%指定がなくてもあるものとして解釈しているようですね。やはりiBooksは特殊というべきでしょうか。
○結論としては、現時点で、ブラウザ、Adobe Digital Editions、iBooks(1.2)で共通になるようなイメージの大きさ指定は、このケース4の方法しかない、ということになりそうです。
○テストデータ
Case4aファイルをダウンロード




瞬簡PDF 書けまっせ 2024
PDFに文字が書ける! 入力欄を自動認識


HTML on Word
WebページをWordで作る!


瞬簡PDF 書けまっせ 2024
PDFに文字が書ける! 入力欄を自動認識


瞬簡PDF 変換 2024
PDFをOffice文書へ高精度変換