イメージの大きさの決定について、CSS 2.1仕様との関係を整理しておきます。
この記事は、昨日の「EPUBで画像の大きさを指定する方法について、続きです」の続きです。初めての方は、前の記事をお読みいただくとわかりやすいと思います。
1．非置換インラインとは
CSS 2.1の3.1 定義に置換要素の定義があります。
http://www.w3.org/TR/CSS2/conform.html#replaced-element
置換要素とはイメージ、埋め込みオブジェクト、アプレットなど、内容が普通の要素とは別のものに置換されて可視化されるものとなっています。置換要素には固有な大きさ（width、height）があることが多いという説明があります。
ここから「非置換のインライン要素」というのは、画像などではないインライン要素（spanなど）のことであることがわかります。span要素のような通常の文書内のンライン要素にwidthを指定したとしても、CSSではwidthの指定は適用されず無視されることになります。
2．画像の表示サイズの決定
前回のケース４で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の仕様とは違うということになります。

Tweet