質問: [css]縦または横の長さを指定したい htmlとcssで、 任意の形の長方形のimgを、大きさの決まった正方形の中に最大限大きく表示したいです。 つまり、縦か横かの長い方のwidth(height)を一定の長さにしたいのですが、 そのような指定方法はあるでしょうか? よろしくお願いいたします。
回答: 両方は無理です。 img要素は置換インライン要素なので、内容の大きさでサイズが変わりますが、これをブロック要素にすると、コンテナブロックを内辺を参照しますから、横幅・あるいは縦幅いずれかを固定することは出来ます。 普通は、サンプルのように横幅を固定して高さは内容の大きさで変化させまずが、外枠の内寸に合わせるときはブロック要素にします。 サンプルは、css上はdisplay:block;は指定してありませんが、次にのブロックがくるため、匿名ブロックとして処理されているためコンテナブロックのサイズを参照しています。 ★下記ソースはタブを_に置換してあります。 なお、 ★another html-lint gateway ( http://openlab.ring.gr.jp/k16/htmllint/htmllint.html ) ★w3c css 検証サービス ( http://jigsaw.w3.org/css-validator/#validate_by_input ) で検証済み 両方を外枠に合わせるためには、画像処理ソフト(多くのサーバーにインストールされているはずのimagemagick( http://mechanics.civil.tohoku.ac.jp/soft/node43.html ))を使ったcgiで画像を拡大縮小する必要があります。 【引用】____________ここから # 比率を保ったままの場合 $image->scale( geometry=>"$width x $height" ); ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ここまで[jpan tools -tools:image::magick-( http://jpan.jp/ja/tools/imagemagick/ )]より imagemagickを使うと、数行のプログラムを書くだけで、画像サイズを取得して指定されたサイズに合わせて拡大縮小してくれます。 _ _サンプル _ _ _ _ _ _サンプル _ __ ___お座りしているワンコ __ __ ___周囲は緑豊か __ __ ___海も見える __ __ ___コマンドを待ってハンドらーの顔を見上げている __ __ ___座ったままボールの行方を __ __ ___「モッテコイ」で走り出す。 __ __ ___ボール目指して一目散 __ __ ___咥えて走って来る __ __ ___手に渡す __ _