Hatena::ブログ(Diary)

cassupportの日記

2011-04-27

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

イメージの大きさの決定について、CSS 2.1仕様との関係を整理しておきます。

1.非置換インラインとは

CSS 2.1の3.1 定義に置換要素の定義があります。

http://www.w3.org/TR/CSS2/conform.html#replaced-element

置換要素とはイメージ、埋め込みオブジェクトアプレットなど、内容が普通の要素とは別のものに置換されて可視化されるものとなっています。置換要素には固有な大きさ(width、height)があることが多いという説明があります。

ここから「非置換のインライン要素」というのは、画像などではないインライン要素(spanなど)のことであることがわかります。span要素のような通常の文書内のインライン要素にwidthを指定したとしても、CSSではwidthの指定は適用されず無視されることになります。

2.画像の表示サイズの決定

前回のケース4でdivに幅を指定したとき、その子供のimgの表示サイズは次のようになっていました。

(1)ブラウザAdobe Digital Editionsではimgにwidth:100%を指定しないとイメージ固有の大きさで表示されwidth:100%を指定したときに初めて、親のdiv要素に指定した幅で表示される。

(2)iBooksはimgにwidth:100%を指定しなくても親のdiv要素に指定した幅で表示される。

2種類の挙動のうちどちらが正しいのでしょうか?

CSS 2.1の仕様では「10.3幅とマージンの計算」の「10.3.2 置換インライン要素」の項

http://www.w3.org/TR/CSS2/visudet.html#inline-replaced-width

に次のような記述があります。

「もし、heightとwidthが共に'auto'になり、かつ、要素が固有の幅をもつならば、固有の幅をwidthの値として使用する。」

widthもheightも初期値は'auto'です。「imgになにもwidthを指定しない」とwidthの値は初期値の'auto'になりますのでこの記述が適用されます。

つまり、imgにwidthもheightも明示的に指定しない場合はイメージの固有サイズで表示するのが正しいことになります。

このことからiBooksの挙動はCSS2.1の仕様とは違うということになります。

スパム対策のためのダミーです。もし見えても何も入力しないでください
ゲスト


画像認証