- ベストアンサー
[css]縦または横の長さを指定したい
ｈｔｍｌとｃｓｓで、 任意の形の長方形のimgを、大きさの決まった正方形の中に最大限大きく表示したいです。 つまり、縦か横かの長い方のwidth(height)を一定の長さにしたいのですが、 そのような指定方法はあるでしょうか？ よろしくお願いいたします。
- charlie432
- お礼率100% (53/53)
- HTML
- 回答数1
- ありがとう数1
- みんなの回答 （1）
- 専門家の回答
質問者が選んだベストアンサー
関連するQ&A
- 【html】画像を横（縦）の長さだけ指定して縦（横）の長さは画像に合わせる
画像を横（縦）の長さだけ指定して縦（横）の長さは画像に合わせる ということはできないんでしょうか？ "auto"ではIEで表示できません 例 -- <img alt="test" width="300" height="auto" src="oma-n.jpg" /> --
- ベストアンサー
- ブログ
- ｃｓｓで下限を指定しないのはできるか？
cssファイルを作るところでheightを指定すると汎用性がなくなるのですがどうしたらいいですか？横は指定でいいですが縦はページごとにどこまで使うかは一概には指定できないわけで。 #left { width:200px; height:600px; float:left; } #right { width:600px; height:600px; float:right; }
- ベストアンサー
- HTML
- CSSで縦長・横長の写真を一定に並べたい
写真のギャラリーのようなものを作成しています。 写真のサムネイルが200×150pxのものと150×200pxのものがあり、並びはランダムです。 この写真を正方形の方眼紙に並べるように配置したいと思っています。 テーブルで作成すれば楽なのですが、文書構造的にCSSで行いたいと思っています。 リストでマークアップして、それぞれのli要素を200pxの正方形にしてから、その中央に画像を表示させたいのですが… 縦長の写真はtext-align:center;で処理ができるので、できましたが、横長写真の上下位置が中央になりません。 横長写真が入っているli要素だけに対してクラスを指定すればできそうなのですが、数が多いので、一括で処理できないか、と奮闘しております。 試しにli要素に対してline-heightを200pxで指定し、img要素に対してvertical-alignをmiddleで指定してみたのですが、Firefoxではうまくいくものの、IE（8）でNGでした。 現在のソースは以下の通りです。 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>ギャラリー</title> <style type="text/css"> <!-- #content { width: 612px; } #content ul { margin: 0px; padding: 0px; } #content li { list-style: none; line-height: 200px; float: left; height: 200px; width: 200px; text-align: center; border: 2px solid #009933; } #content li img { vertical-align: middle; } --> </style> </head> <body> <div id="content"> <ul> <li><img src="images/tate.gif" alt="縦" width="150" height="200" /></li> <li><img src="images/yoko.gif" alt="横" width="200" height="150" /></li> <li><img src="images/yoko.gif" alt="横" width="200" height="150" /></li> <li><img src="images/tate.gif" alt="縦" width="150" height="200" /></li> <li><img src="images/yoko.gif" alt="横" width="200" height="150" /></li> <li><img src="images/tate.gif" alt="縦" width="150" height="200" /></li> <li><img src="images/yoko.gif" alt="横" width="200" height="150" /></li> <li><img src="images/yoko.gif" alt="横" width="200" height="150" /></li> <li><img src="images/tate.gif" alt="縦" width="150" height="200" /></li> <li><img src="images/yoko.gif" alt="横" width="200" height="150" /></li> <li><img src="images/tate.gif" alt="縦" width="150" height="200" /></li> <li><img src="images/tate.gif" alt="縦" width="150" height="200" /></li> </ul> </div> </body> </html> どなたかお分かりになる方、いらっしゃいましたら、お知恵を拝借できれば幸いです。 よろしくお願い致します。
- ベストアンサー
- 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より大きい正方形で敷き詰めることは出来ないので ある長方形に敷き詰められている最も大きい正方形の長さは長方形の縦の横の長さの最大公約数になる と考える事が出来る。 よろしくお願いします。
- ベストアンサー
- 数学・算数
- CSSでの画像サイズ指定について
本などでCSSを練習中です。 画像サイズを自動的に指定したサイズに縮小するCSSは ありますでしょうか？ 以下のよな商品紹介のサムネイルを作りました。 画像部分は常に120×120pxに収まってほしいのですが、 横幅が高さより大きい画像を入れた場合、高さは指定した120pxになりますが(縦横比率は同じ)、横は飛び出してデザインが崩れてしまいます。 正方形の画像はそのまま120×120pxになります。 何かアドバイスをお願い致します。 また、他のおかしいところもご指摘下さい。 【HTML】 <div id="itemBox"> <div class="itemPhoto"><a href="#"><img src="#" alt="商品名" width="120" height="120" /></a></div> <p><a href="#">商品名</a></p> </div> 【CSS】 div#itemBox{ border: 1px solid #9f9f9f; width: 120px; margin: 10px; float: left; text-align: center; padding: 10px; height: 150px; } div#itemBox p{ float: left; text-align:left; width: 120px; margin-top: 5px; } div#itemPhoto{ margin: 0; padding: 5px; text-align: center; width:120px; height:120px; }
- 締切済み
- CSS
- ホームページで縦と横の写真を載せる。
今写真を表示させるときに <IMG style="width:400px;height:300px;src="20060628_001.jpg"> という記述をしているのですがこれだと縦の写真がつぶれて表示されてしまっています。 考えてみたのですがjavascriptを使用し縦の写真か横の写真かをフラグをもたせてサイズを指定できればいいのですが何せ初心者で知識が乏しく、Googleで「縦 横 写真 html」とか「縦 横 写真 ホームページ」とかで検索しても見つかりませんでした。 なのでこちらでお力を貸していただきたく質問をさせていただきました。 どうかよろしくお願いします。 明日までに提出しないといけないので「３．直ぐに～」を選択させていただきました。
- ベストアンサー
- HTML
- 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の使い方について imgやswfのheightやwidthはcssで設定することはできないのでしょうか？ div classで囲ってcssでwidthとheightを設定しましたが、レイアウトの前面のように浮き上がるだけでサイズ変更できませんでした。 その他の文字やボックスはcssでwidthやheightの設定ができるのに、なぜimgなどはできないのでしょうか？できるものとできないものが他にもたすうあるのでしょうか？
- ベストアンサー
- HTML
- CSSでの背景の指定について教えてください。
背景がうまく指定できません。よろしくお願いします。 フォルダ（img)の中にbana(ファイル名）750×100のjpgの画像が置いてあります。 CSSの指定は #head{ width:750px; height:100px; background-color:#ffffff; background-image:url(../img/bana.jpg); border-bottom:#999999 solid 1px; } HTMLは <div id="head"> <h1>・・・・・・</h1> </div> です。色々と試してみたのですが、背景が入ってくれません。 初心者ですので説明不足かもしれませんが よろしくお願いします。
- ベストアンサー
- ホームページ作成ソフト
- レコーダー用リモコンの設定方法について教えてください。
- エレコム株式会社のレコーダー用リモコンの設定方法を教えてください。
- レコーダーを操作するためには、どのようにリモコンを設定すればいいですか？
お礼
詳しくありがとうございます！ 私も結局javascriptを作って対応しましたが、こちらのやり方も試してみたいと思います。 ありがとうございました！