• ベストアンサー
  • 困ってます

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

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

共感・応援の気持ちを伝えよう!

  • 回答数1
  • 閲覧数635
  • ありがとう数1

質問者が選んだベストアンサー

  • ベストアンサー
  • 回答No.1

両方は無理です。  img要素は置換インライン要素なので、内容の大きさでサイズが変わりますが、これをブロック要素にすると、コンテナブロックを内辺を参照しますから、横幅・あるいは縦幅いずれかを固定することは出来ます。  普通は、サンプルのように横幅を固定して高さは内容の大きさで変化させまずが、外枠の内寸に合わせるときはブロック要素にします。  サンプルは、CSS上はdisplay:block;は指定してありませんが、次に<p>のブロックがくるため、匿名ブロックとして処理されているためコンテナブロックのサイズを参照しています。 ★下記ソースはタブを_に置換してあります。 なお、 ★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を使うと、数行のプログラムを書くだけで、画像サイズを取得して指定されたサイズに合わせて拡大縮小してくれます。 <!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"> <!-- ul.album ul.alubum li,ul.alubum li img{display:block;} ul.album{margin:5px;padding:0;position:relative;font-size:0.8em;} ul.album li{margin:5px;width:120px; height:180px;float:left;overflow:auto;} ul.album li img{width:90%;height:auto;padding:2px;border-style:solid;border-color:gray;border-width:1px 3px 3px 1px;} ul.album li p{text-indent:1em;margin:2px;} --> _</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>

共感・感謝の気持ちを伝えよう!

質問者からのお礼

詳しくありがとうございます! 私も結局javascriptを作って対応しましたが、こちらのやり方も試してみたいと思います。 ありがとうございました!

関連するQ&A

  • 【html】画像を横(縦)の長さだけ指定して縦(横)の長さは画像に合わせる

    画像を横(縦)の長さだけ指定して縦(横)の長さは画像に合わせる ということはできないんでしょうか? "auto"ではIEで表示できません 例 -- <img alt="test" width="300" height="auto" src="oma-n.jpg" /> --

  • cssで下限を指定しないのはできるか?

    cssファイルを作るところでheightを指定すると汎用性がなくなるのですがどうしたらいいですか?横は指定でいいですが縦はページごとにどこまで使うかは一概には指定できないわけで。 #left { width:200px; height:600px; float:left; } #right { width:600px; height:600px; float:right; }

    • ベストアンサー
    • HTML
  • 長方形の縦の長さ

    ●横が縦より長い長方形から、この長方形の縦の辺を1辺とする正方形を片側から切り取ったとき、残った長方形の縦と横の長さの比が、もとの長方形の横と縦の長さの比に等しかった。このとき、もとの長方形の横の長さを1とすると、縦の長さはいくらか。 求める長さをxとすると0<x<1となるのは分かるのですが… 回答よろしくお願いします。 答えは(-1+√5)/2となります。

  • max-widthを指定した場合の縦サイズのリサイズ方法

    画像のサイズをCSSのmax-widthを指定した場合、縦のサイズを、縦横比率を変えずに自動でリサイズする方法を探しています。 CMS (Movable Type)でサイトを構築しており、ブログ記事の本文に「画像挿入」ボタンを利用して挿入するため、<img src="photo.jpg" width="600" height="400">とwidthとheightが指定された状態のため、max-widthで400pxと指定すると画像が縦長になってしまっています。 どのようにすれば縦横比率を変えず、さらにmax-widthのような形で縦のサイズを自動でリサイズする事ができますでしょうか?宜しくお願いします。

    • ベストアンサー
    • HTML
  • CSSでイメージを縦並びに表示する際にブロック要素にする必要はあるのでしょうか?

    CSS初心者です。 サイト制作中に疑問に思ったのですが、イメージを縦並びに3つ並べて 中央に配置する時、あるページに「イメージをブロック要素にする」と書かれてたのですが、それは正しいのでしょうか?初心者の為、悩んでしまいました。 (html上) <img src="○○" width="200" height="200" alt="○○" /> <img src="○○" width="200" height="200" alt="○○" /> <img src="○○" width="200" height="200" alt="○○" /> (CSS上) img { display: block;←ここでブロック要素にする必要がわかりません。 margin: 0 auto 10px; text-align: center; } 後、違う質問で凄く初歩的なことなのですが、この「イメージを中央にする」時は「領域で中央に」という考え方は間違いなのでしょうか? 例えば先程のイメージの場所を、そのボックス内全てのものを中央にすると考えた場合、 (html上) <div id="center"> <img src="○○" width="200" height="200" alt="○○" /> <img src="○○" width="200" height="200" alt="○○" /> <img src="○○" width="200" height="200" alt="○○" /> </div> (CSS上) div#center { margin: 0 auto; text-align: center; } div#center img { margin-bottom: 10px; } と<div>でセンターにしても文法的にはおかしくないんでしょうか?? 初心者過ぎてすいません。教えて下さい。宜しくお願いします。

  • ホームページで縦と横の写真を載せる。

    今写真を表示させるときに <IMG style="width:400px;height:300px;src="20060628_001.jpg"> という記述をしているのですがこれだと縦の写真がつぶれて表示されてしまっています。 考えてみたのですがjavascriptを使用し縦の写真か横の写真かをフラグをもたせてサイズを指定できればいいのですが何せ初心者で知識が乏しく、Googleで「縦 横 写真 html」とか「縦 横 写真 ホームページ」とかで検索しても見つかりませんでした。 なのでこちらでお力を貸していただきたく質問をさせていただきました。 どうかよろしくお願いします。 明日までに提出しないといけないので「3.直ぐに~」を選択させていただきました。

    • ベストアンサー
    • HTML
  • 正方形と、最小公倍数&最大公倍数の関係について

    ある長方形を敷き詰めて出来る最も小さい正方形は、長方形の縦と横の長さの最小公倍数になる ということと ある長方形に敷き詰めることの出来る最も大きい正方形は、長方形の縦と横の長さの最大公約数になる ということの理由は、下の考え方で良いでしょうか? ■正方形と最小公倍数の関係 縦72×横72の正方形で考える 縦72を24ずつ3分割して横に直線を引く 横72を18がつ4分割して縦に直線を引く すると縦72×横72の正方形が、縦24×横18の長方形で敷き詰められていることになる 縦72を24ずつ3分割しているということは、72は24の倍数と考えることが出来る 同じく横72も18ずつ3分割しているということは、72は18の倍数と考えることが出来る よって正方形の一辺の長さ72は24と18の公倍数と考えられる。 24と18の最小公倍数は72であり、公倍数の時しか正方形にならないことから一辺が72より小さい正方形は作れないので ある長方形で敷き詰めて出来る最も小さな正方形の一辺の長さは 長方形の縦と横の長さの最小公倍数になる と考えることが出来る ■正方形と最大公約数の関係 24を長方形の縦の長さ 18を長方形の横の長さ とする 長方形の縦の長さ24を長さ6で分割して横に直線を引く 横の長さ18を長さ6で分割して縦に直線を引く すると、24×18の長方形が、一辺の長さが6の正方形で敷き詰められていることになる。 縦24を6ずつ均等に分割しているということは、6は24の約数と考えることが出来る 同じく横18も6ずつ均等に分割しているということは、6は18の約数と考えることが出来る よってこの正方形の一辺の長さ6は長方形の縦24と横18の公約数と考えられる。 24と18の最小公倍数は6であり、縦24と横18の長方形を一辺が6より大きい正方形で敷き詰めることは出来ないので ある長方形に敷き詰められている最も大きい正方形の長さは長方形の縦の横の長さの最大公約数になる と考える事が出来る。 よろしくお願いします。

  • 画像の縦:横比を維持してリサイズ

    画像の縦:横比を維持してリサイズし表示したいのですが、ご指導よろしくお願い致します。 <?php $array_img = glob( '*.jpg'); for($i=0; $i<sizeof($array_img); $i++){ $array_img[$i] = ereg_replace("\n","",$array_img[$i]); $thumbHeight = round($height * THUMBNAIL_WIDTH/$width); print "<br style=\"border:1px solid #000000\"><img src=\"$array_img[$i]\" width=\"320\" height=\"340\"></br>"; } ?>

    • 締切済み
    • PHP
  • cssの使い方について

    cssの使い方について imgやswfのheightやwidthはcssで設定することはできないのでしょうか? div classで囲ってcssでwidthとheightを設定しましたが、レイアウトの前面のように浮き上がるだけでサイズ変更できませんでした。 その他の文字やボックスはcssでwidthやheightの設定ができるのに、なぜimgなどはできないのでしょうか?できるものとできないものが他にもたすうあるのでしょうか?

    • ベストアンサー
    • HTML
  • <td>内で背景縦100%リピートする方法

    こんにちは。 現在ホームページを作成しているんですが、 凄く簡単そうなところで躓いてしまってます>< どうも上手くいかなくて… 分かる方いらっしゃったらご教授ください!! 今<td>内の背景をCSSで100%縦にリピートさせようとしています。 どうしてもCSSを使わなくてはいけないのは、 pngの透過をCSSでfilterを用いてbackgroundとして使ってるからです。 いくつか参考になりそうなサイトはあったんですが、 filterを使ってるからか(多分自分のミスだと思いますが;)上手くいきません。 今やりたいと思っているのはこんな状態です。 ■■■■■■■ ⇒<img src="イメージ1" width="200" height="10"> □□□□□□□ ⇒CSSで縦リピートしたい部分 □□□□□□□ □□□□□□□ □□□□□□□ ■■■■■■■ ⇒<img src="イメージ2" width="200" height="10"> これが<td height="100%" id="test"></td>の中に入ってる感じです。 ■(黒い四角)は角丸のにしたかったのでイメージにしました。 でもこうしてCSS上で□(上記の白四角の部分)の高さを 100%にすると、下のイメージ2の部分が消えて見えなくなってしまいます; ■の部分と□の部分をテーブルで分けてもダメでした。。 因みにCSSは以下の方法を試しました。 (1)普通に100%指定 height: 100%; (2)htmlとbodyにも指定 html, body {       height: 100%; } body > #test {       height: auto; } (3)htmlとbodyにも指定その2 html, body {       height: 100%; } body > #test {       height: 100%; } height98%とかも試したんですが、 2カラムの縦の高さをそろえたいとなると、 ブラウザやフォントサイズによってばらつきがでるので、 非常にこまってます; どなたか分かる方いらっしゃったら教えてもらえませんか? 宜しくお願い致します。