[css]縦または横の長さを指定したい

解決済

質問者：charlie432
質問日時：2011/07/28 18:23
回答数：1件

ｈｔｍｌとｃｓｓで、
任意の形の長方形のimgを、大きさの決まった正方形の中に最大限大きく表示したいです。
つまり、縦か横かの長い方のwidth(height)を一定の長さにしたいのですが、
そのような指定方法はあるでしょうか？

よろしくお願いいたします。

通報する

この質問への回答は締め切られました。

質問の本文を隠す

回答 (1件)

ベストアンサー優先
最新から表示
回答順に表示

No.1ベストアンサー

回答者： ORUKA1951
回答日時：2011/07/28 20:06

両方は無理です。

img要素は置換インライン要素なので、内容の大きさでサイズが変わりますが、これをブロック要素にすると、コンテナブロックを内辺を参照しますから、横幅・あるいは縦幅いずれかを固定することは出来ます。
　普通は、サンプルのように横幅を固定して高さは内容の大きさで変化させまずが、外枠の内寸に合わせるときはブロック要素にします。
　サンプルは、CSS上はdisplay:block;は指定してありませんが、次に<p>のブロックがくるため、匿名ブロックとして処理されているためコンテナブロックのサイズを参照しています。
★下記ソースはタブを＿に置換してあります。
なお、
★Another HTML-lint gateway ( http://openlab.ring.gr.jp/k16/htmllint/htmllint. … )
★W3C CSS 検証サービス ( http://jigsaw.w3.org/css-validator/#validate_by_ … )
で検証済み

両方を外枠に合わせるためには、画像処理ソフト(多くのサーバーにインストールされているはずのimageMagick( http://mechanics.civil.tohoku.ac.jp/soft/node43. … )）を使ったCGIで画像を拡大縮小する必要があります。
【引用】＿＿＿＿＿＿＿＿＿＿＿＿ここから
# 比率を保ったままの場合 $image->Scale( geometry=>"$width x $height" );
￣￣￣￣￣￣￣￣￣￣￣￣￣ここまで［Jpan Tools -TOOLS:Image::Magick-( http://jpan.jp/ja/tools/ImageMagick/ )］より
imageMagickを使うと、数行のプログラムを書くだけで、画像サイズを取得して指定されたサイズに合わせて拡大縮小してくれます。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="ja">
<head>
＿<meta http-equiv="content-type" content="text/html; charset=Shift_JIS">
＿<title>サンプル</title>
＿<meta name="author" content="ORUKA1951">
＿<meta http-equiv="Content-Style-Type" content="text/css">
＿<link rev="made" href="mailto:oruka1951@hoge.com" title="send a mail" >
＿<link rel="START" href="../index.html">
＿<style type="text/css">

＿</style>
</head>
<body>
＿<h1>サンプル</h1>
＿<ul class="album">
＿＿<li><img src="./photo/001.jpg" width="256" height="192" alt="おすわり">
＿＿＿<p>お座りしているワンコ</p>
＿＿</li>
＿＿<li><img src="./photo/002.jpg" width="281" height="211" alt="風景">
＿＿＿<p>周囲は緑豊か</p>
＿＿</li>
＿＿<li><img src="./photo/003.jpg" width="256" height="192" alt="風景">
＿＿＿<p>海も見える</p>
＿＿</li>
＿＿<li><img src="./photo/004.jpg" width="314" height="256" alt="アイコンタクト">
＿＿＿<p>コマンドを待ってハンドらーの顔を見上げている</p>
＿＿</li>
＿＿<li><img src="./photo/005.jpg" width="256" height="192" alt="投げられたボール">
＿＿＿<p>座ったままボールの行方を</p>
＿＿</li>
＿＿<li><img src="./photo/006.jpg" width="256" height="272" alt="走り出した">
＿＿＿<p>「モッテコイ」で走り出す。</p>
＿＿</li>
＿＿<li><img src="./photo/007.jpg" width="192" height="144" alt="走っている">
＿＿＿<p>ボール目指して一目散</p>
＿＿</li>
＿＿<li><img src="./photo/008.jpg" width="192" height="256" alt="咥えて帰ってくる">
＿＿＿<p>咥えて走って来る</p>
＿＿</li>
＿＿<li><img src="./photo/009.jpg" width="256" height="341" alt="手に渡す">
＿＿＿<p>手に渡す</p>
＿＿</li>
＿</ul>
</body>
</html>