リキッドデザインの縦向き画像

質問

リキッドデザインで横向き画像を配置する場合、CSSでwidth100%で指定すると自動的にheightを計算されますが、縦向き画像の場合どのように指定すると良いのでしょうか？

回答No.1

ORUKA1951 · ベストアンサー

縦も同様です。
＞リキッドデザインで横向き画像を配置する場合、CSSでwidth100%で指定すると自動的にheightを計算されますが、
　通常は計算されないはずです!!
　(HTMLがきちんと書かれていれば、width,height属性でサイズが指定されている(詳細度は0000))
　スタイルシート側で、width:100%;height:100%;とあわせて指定する必要があります。

　なお、画像は置換インライン要素なのでブロックにしたほうが良いでしょう。
<div class="section">
　・・・
　<div class="figure">
　　<p><img src="./images/7.jpg" width="240" height="320" alt="白くて美しいキノコ"></p>
　　<p class="figcaption">キノコの写真</p>
</div>

div.section{position:relative;}
div.section div.figure{width:20%;float:right:margin:5px;position:relative;}
div.section div.figure p{margin:0;text-align:center;}
div.section div.figure img{display:inline-block;width:90%;}

とか・・
・本文中(section)を内包ブロックの基準にする(relative)
・本文中の挿絵(figure)は、本文の幅の20%で右にfloatさせ、マージンは5px、内包ブロックの基準にする(relative)
・本文中の挿絵の画像はinline-blockにし幅は90%

というふうに指定します。高さを基準にする場合も同じです。
HTML5で書かれていれば
section{position:relative;}
section figure{width:20%;float:right:margin:5px;position:relative;text-align:center;}
section figure p{margin:0;text-align:center;}
section figure img{display:inline-block;width:90%;}
ですかね。

　一方を指定して、他方をauto;

お礼

ご回答ありがとうございます。
大変参考になりました。