テーブル高さ指定タグで画像を同じサイズで表示する方法

2023/08/09 12:18

このQ&Aのポイント

テーブル高さ指定タグを使用して、サイズがバラバラの４枚の画像を同じ幅・高さで表示したい場合、指定した高さや幅が正しく反映されないことがあります。どのようにすれば、すべての画像を300×300ピクセルの範囲内に収めることができるのでしょうか？
テーブル高さ指定タグを使用して、異なるサイズの画像を同じサイズで表示したい場合に、指定したサイズが正しく反映されない問題が発生することがあります。具体的には、指定した高さを超えて画像が表示されてしまいます。この問題を解決するためには、どのような方法があるのでしょうか？
テーブルの高さを指定するタグを使用して、異なるサイズの画像を同じサイズで表示したい場合、指定したサイズが正しく反映されないことがあります。どのようにすれば、すべての画像を300×300ピクセルの範囲内に収めることができるのでしょうか？

ベストアンサー

テーブル高さ指定タグについて

2010/05/02 18:12

テーブル高さ指定タグについてサイズがバラバラの４枚の画像をテーブルを使って同じ幅・高さ縦横各２枚並べて表示したいと思っています。下記のとおり高さ・幅300と指定をしているにもかかわらず、400×400pixの画像が高さを超えて目いっぱい表示してしまいます。 <table border="1" width="600" height="600" cellspacing="0" cellpadding="0"> <tr> <td width="300" height="300" align="center"> <IMG border="0" src="http://○○○○/f000000_1.jpg"></td> <td width="300" height="300" align="center"> <IMG border="0" src="http://○○○○/f000000_2.jpg"></td> </tr> <tr> <td width="300" height="300" align="center"> <IMG border="0" src="http://○○○○/f000000_3.jpg"></td> <td width="300" height="300" align="center"> <IMG border="0" src="http://○○○○/f000000_4.jpg"></td> </tr> </table> どうすれば、すべて300×300pixの範囲内におさめることができるのでしょうか？

ytytjr
お礼率72% (8/11)

HTML
回答数3
ありがとう数14

みんなの回答 （3）
専門家の回答

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

ベストアンサー

smileeeen
ベストアンサー率70% (21/30)

2010/05/02 18:40 回答No.2

この場合IMGタグにも縦横幅を指定する必要があるかと思います。元の画像が400px×400px(正方形)なのであれば、 <img border="0" width="300" height="300" src="http://○○○○/f000000_1.jpg"> 元の画像が縦長ならば <img border="0" height="300" src="http://○○○○/f000000_1.jpg"> といった形で記述されてみてはいかがでしょうか。

質問者

お礼 2010/05/03 14:55

解決しました。助かりました。本当にありがとうございます。

その他の回答 (2)

ORUKA1951
ベストアンサー率45% (5062/11036)

2010/05/02 19:23 回答No.3

imgは置換要素であること。 tableは、内容の大きさに従って伸縮なければならない事 HTMLの仕様　そうしないと、はみ出た部分が表示されなくなる。本来表でないものをtableを使って成型することは間違い【引用】＿＿＿＿＿＿＿＿＿＿＿＿ここから非視覚系メディアでのレンダリングに際して問題を起こすことがあるため、単に文書内容を整形する目的だけで表を用いるべきでない。￣￣￣￣￣￣￣￣￣￣￣￣￣ここまで［Tables in HTML documents (ja)( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/struct/tables.html#h-11.1 )］より　画像をサイズ指定で表示させ、スタイルシートで配置しましょう。その場合、他のユーザーエージェントに対する配慮も忘れないように

質問者

お礼 2010/05/03 14:54

そうですか・・ありがとうございました。

noname#114962

2010/05/02 18:28 回答No.1

ブラウザにもよると思いますが、画像のサイズが優先されると思います。 300x300以下の画像だけなら問題ないですが、それ以上の物があると画像を勝手に縮小してくれるブラウザはあまりないと思うので、はみ出してしまうか、テーブルが勝手にでかくなるかと。画像自体を加工するか、表示サイズを変更するか、スタイルシートでトリミングして下さい。表示サイズの変更 http://www.tagindex.com/html_tag/img/img_width.html スタイルシート http://hyper-text.org/archives/2008/02/css_clip_property.shtml

質問者

お礼 2010/05/03 14:56

ご親切にありがとうございました。

関連するQ&A

テーブルに画像を入れると、テーブルの幅が広がってしまいます
HTML初心者の者です。３行２列のテーブルを作り、左側の列に縮小した画像を入れたのですが、左側の列が画面いっぱいに広がってしまい、画像の幅に合わせて幅を狭くすることが出来ないでいます。どうしたら、画像の幅に合わせて左列の幅を狭くすることが出来るでしょうか。その部分のHTMLは、以下の通りです。 <table border="0" align="center"> <tr> <td><img src="*****.jpg" width=20% align="right"> </td> <td>説明文・・・・</td> </tr> <tr> </td><img src="*****.jpg" width=20% align="right"> </td> <td>説明文・・・・</td> </tr> <tr> </td><img src="*****.jpg" width=20% align="right"> </td> <td>説明文・・・・</td> </tr> </table>
- ベストアンサー
- HTML
テーブルで画像を並べるときに・・
今ホームページをつくっていて幅600pxのロゴ(jpg画像)の下に幅280px,80px,80px,80px,80px画像を並べています。全部の画像をぴったりくっつけたいんですが、上のロゴと下の5つ並んだ画像の間に1pxくらいの隙間が出来てしまいます。ソースは <table width="600" border="0" cellpadding="0" cellspacing="0"> <tr> <td colspan="5"> <img src="img/title.jpg" width="600" border="0"> </td> </tr> <tr> <td> <img src="img/1.jpg" width="280"height="35" border="0"> </td> <td> <img src="img/2.jpg" width="80" height="35" border="0"> </td> <td> <img src="img/3.jpg" width="80" height="35" border="0"> </td> <td> <img src="img/4.jpg" width="80" height="35" border="0"> </td> <td> <img src="img/5.jpg" width="80" height="35" border="0"> </td> </tr> </table> http://web-channel.com/index.html このホームページのようにしたいんですがどこを直したらいいんでしょうか？環境は、WinMEでエディタにタグ打ち込んで作ってます。
- ベストアンサー
- HTML
テーブルを作ったんですが…
はじめまして画像テーブルを作ったのですが、スクロールバーがでません。タグを載せておきますので暇でしたら解答してください。 <style TYPE="text/css">  </style> <TABLE align="left" width="500" cellpadding="0" cellspacing="0" border="0"> <TBODY> <TR> <TD width="420" height="27"><IMG src="01.gif" width="42" height="27" border="0"></TD> <TD background="02.gif"></TD> <TD width="0" height="0"><IMG src="03.gif" width="40" height="27" border="0"></TD> </TR> <TR align="left"> <TD background="04.gif"></TD> <TD width="100%" height="350" bgcolor="white"><pre>テスト<BR> </TD> <TD background="06.gif"></TD> </TR> <TR> <TD width="416" height="25"><IMG src="07.gif" width="42" height="46" border="0"></TD> <TD background="08.gif"></TD> <TD width="0" height="0"><IMG src="09.gif" width="40" height="46" border="0"></TD> </TR> </TBODY> </TABLE>
- ベストアンサー
- その他（インターネット・Webサービス）
テーブル幅を完全に指定したい
テーブル幅の指定方法を教えてください。以下のような記述のテーブルを何列も羅列して表を作ろうと思っています。 alt="小A"～alt="小D" のところは項目ごとのアイコン画像が入り、その項目に該当するものが無い場合は空白となるような表です。実際にブラウザで表示してみると、widthの設定はしているのに、空白をつくると若干ですが横幅が変わってしまい、表として並べたときにそのズレが目立ちます。何がいけないのか、お知恵を拝借できませんでしょうか。宜しくお願い致します。以下、その表の一部であるテーブルになります。 <table bordercolor="#ffffff" width="520" height="80" align="center" cellspacing="3"> <tr><td bgcolor="#ffcccc"> <table> <tr> <td width="100" bgcolor="#ffcccc" align="center" valign="middle"> <a href="★" target="_blank"><img src="■.gif" width="80" height="60" border="0" class="pict"/></a> </td> <td width="260" align="left" valign="center"> あいうえおかきくけこさしすせそたちつてとなにぬねのはひふへほまみむめもやゆよ </td> <td valign="center"> <img alt="中" src="■.gif" width="80" height="60" class="pict" /> </td> <td width="25"><a href="★" target="_blank"><img alt="小A" src="■.gif" width="25" height="60" class="pict" /></a></td> <td width="25"><a href="★" target="_blank"><img alt="小B" src="■.gif" width="25" height="60" class="pict" /></a></td> <td width="25"><a href="★" target="_blank"><img alt="小C" src="■.gif" width="25" height="60" class="pict" /></a></td> <td width="25"><a href="★" target="_blank"><img alt="小D" src="■.gif" width="25" height="60" class="pict" /></a></a></td> </tr> </table></td></tr></table>
- ベストアンサー
- HTML
テーブル内でのランダムな並べ変え
全然知識がないのですがよろしくお願いします。タグで <table border="0"> <tr> <td colspan="3" width="100%" bgcolor="#FF1493"><font color="#ffffff">  ◆タイトル</font></td> </tr><tr><td width="100" height="100"><img src="画像.jpg" width="100" height="100" border="0"></td> <td colspan="2" width="380" height="100" valign="top" align="left" bgcolor="#F8E0F7">文書</td> </tr> <tr> <td colspan="3" width="100%" bgcolor="#FF1493"><font color="#ffffff">  ◆タイトル</font></td> </tr><tr><td width="100" height="100"><img src="画像.jpg" width="100" height="100" border="0"></td> <td colspan="2" width="380" height="100" valign="top" align="left" bgcolor="#F8E0F7">文書</td> </tr> <tr> <td colspan="3" width="100%" bgcolor="#FF1493"><font color="#ffffff">  ◆タイトル</font></td> </tr><tr><td width="100" height="100"><img src="画像.jpg" width="100" height="100" border="0"></td> <td colspan="2" width="380" height="100" valign="top" align="left" bgcolor="#F8E0F7">文書</td> </tr> </table> このようなテーブルがあって、その順番をページ更新でタイトル・画像・文書を一枠としてクルクルランダムに入れかえたいのですが、どうしたらいいでしようか？今後、この一枠がドンドン増えて行って、それも含めて全ての枠をランダムに入れ替えたいのです。 jqueryで簡単にできるようなことは聞きましたが、私には知識がないので助けてください。よろしくお願いします。 http://www.finefinefine.jp/web/kiji2068/ ここを見れとも言われたのですが、スクリプトは私には不明です・・・
- ベストアンサー
- JavaScript
インラインフレーム内でのテーブル位置指定が上手くいきません
インラインフレームを使用したホームページ作成中なんですが一箇所だけどうしても解決できないことがあったので質問させていただきますフリー素材サイトのメニューテーブルを左上フレームに使用しているんですが htmlとスタイルシートを上手く使いこなせてないせいでメニューテーブルの位置指定ができずにいますテーブルは縦につなげるタイプのものです左上フレーム内のright bottomに指定したいのですが上手くいきません大変見苦しい点が多いとは思いますがどなたか解決策、アドバイス等ありましたらよろしくお願いいたします【index.html】 <html><head>～</head> <frameset cols="220,*" frameborder="no" border="0"> <frameset rows="90%,10%" frameborder="no" border="0"> <frame src="menu.html" name="menu" scrolling="no"> <frame src="sita.html" name="sita" scrolling="no"> </frameset> <frame src="top.html" name="main" scrolling="auto" > </frameset> <body>～</body> </frameset> </html> 【menu.html】 <html><head>～</head> <body> <table id="left" cellpadding="0" cellspacing="0"> <h2>サイト名</h2> <tr><td><img src=".gif" width="80" height="47"></td></tr> <tr><td><img src=".gif" width="80" height="4"></td><tr> <tr><td><a href="top.html" target="main"><img src=".gif" width="80" height="16" border="0"></a></td></tr> <tr><td><img src=".gif" width="80" height="4"></td></tr> <tr><td><a href="top.html" target="main"><img src=".gif" width="80" height="16" border="0"></a></td></tr> <tr><td><img src=".gif" width="80" height="4"></td></tr> <tr><td><a href="top.html" target="main"><img src=".gif" width="80" height="16" border="0"></a></td></tr> <tr><td><img src=".gif" width="80" height="4"></td></tr> <tr><td><a href="" target="main"><img src=".gif" width="80" height="16" border="0"></a></td></tr> <tr><td><img src=".gif" width="80" height="4"></td></tr> <tr><td><img src=".gif" width="80" height="16"></td></tr> </table> </body> </html> 【スタイルシート】～ #left{ width:180px; text-align:right; vertical-align:bottom; }
- ベストアンサー
- HTML
助けてください＞＜IE上で1pxのズレ
こんにちわ。組んだテーブルに謎の１ｐｘがはいってしまいます。ファイヤーフォックスでは正常なのですがIEでは1pxの隙間ができてしまうようで。どなたか分かる方いらっしゃたらお願いします＞＜ <table width="660" border="0" cellpadding="0" cellspacing="0"> <tr> <td colspan="2" valign="top"> <img src="img/test_01.jpg" width="660" height="177" alt=""></td> </tr> <tr><td rowspan="2" valign="top"> <table width="316" border="0" cellpadding="0" cellspacing="0"> <tr> <td colspan="2"> <img src="img/test_02.jpg" width="316" height="46" alt=""></td> </tr> <tr> <td> <img src="img/test_05.jpg" width="144" height="47" alt=""></td> <td> <img src="img/test_06.jpg" width="172" height="47" alt=""></td> </tr> <tr> <td colspan="2"> <img src="img/test_08.jpg" width="316" height="169" alt=""></td> </tr> </table> </td></tr> <tr><td valign="top"> <table width="344" border="0" cellpadding="0" cellspacing="0"> <tr><td> <table width="344" border="0" cellpadding="0" cellspacing="0"> <tr> <td> <img src="img/test_03.jpg" width="181" height="62" alt=""></td> <td> <img src="img/test_04.jpg" width="163" height="62" alt=""></td> </tr> <tr> <td colspan="2"> <img src="img/test_07.jpg" width="344" height="83" alt=""></td> </tr> </table> </td></tr> <tr><td> <table width="344" border="0" cellpadding="0" cellspacing="0"> <tr> <td> <img src="img/test_09.jpg" width="160" height="62" alt=""></td> <td> <img src="img/test_10.jpg" width="184" height="62" alt=""></td> </tr> <tr> <td colspan="2"> <img src="img/test_11.jpg" width="344" height="23" alt=""></td> </tr> <tr> <td> <img src="img/test_12.jpg" width="160" height="32" alt=""></td> <td> <img src="img/test_13.jpg" width="184" height="32" alt=""></td> </tr> </table> </td></tr> </table> </td></tr> <tr><td colspan="2"> <table width="660" border="0" cellpadding="0" cellspacing="0"> <tr> <td colspan="5"> <img src="img/test_14.jpg" width="660" height="141" alt=""></td> </tr> <tr> <td> <img src="img/test_15.jpg" width="130" height="150" alt=""></td> <td> <img src="img/test_16.jpg" width="130" height="150" alt=""></td> <td> <img src="img/test_17.jpg" width="140" height="150" alt=""></td> <td> <img src="img/test_18.jpg" width="130" height="150" alt=""></td> <td> <img src="img/test_19.jpg" width="130" height="150" alt=""></td> </tr> <tr> <td colspan="5"> <img src="img/test_20.jpg" width="660" height="40" alt=""></td> </tr> </table> </td></tr> </table>
- 締切済み
- HTML
正方形のセルに縦画像、横画像を中央に配置
よろしくお願いいたします。テーブルを使って、写真のサムネイル一覧表を作成しています。 100x100 の２つのセルをペアとして横に並べ、横画像(100w x 75h)または縦画像(75w x 100h)を入れています。この時、横画像だけを入れたペアは、セルの高さが画像と同じ(75)になってしまいます。常にセルの高さを 100に保つにはどのようにしたらよいのでしょうか。現在は次のように記述しています。 <TR> <TD width="100" hight="100" align="center"><IMG src="W_100.jpg" width="100" height="75" border="0"></TD> <TD width="100" align="center"><IMG src="H_100.jpg" width="75" height="100" border="0"></TD> </TR> <TR> <TD width="100" hight="100" align="center"><IMG src="W_100.jpg" width="100" height="75" border="0"></TD> <TD width="100" align="center"><IMG src="W_100.jpg" width="100" height="75" border="0"></TD> </TR>
- ベストアンサー
- HTML
imgタグについて
imgタグについて http://okwave.jp/qa/q5970749.html この件で質問させていただいてましたが、気になる事がありましたのでアドバイスください。最初のタグーーーーーーーー img{border: 0; vertical-align:bottom;} ーーーーーーーーーーーーー <img src="/img/space.gif" width="100%" height="10px"/> IE8でimgタグのvertical-align:top;が反応して1px×1pxの透明の画像が縦に10px以上伸びてしまっていました。 ↓そこで、このように分ければいいとアドバイスいただきましたが、 .img1{border: 0;} .img2{border: 0; vertical-align:bottom;} imgタグは他のページでも使用しているため img{border: 0; vertical-align:bottom;}は変更出来ませんでした。そこで、img2{border : 0;} とcssに書き込み <img2 src="http://www.itumonavi.jp/img/space.gif" width="100%" height="10px" /> にするとバグは解消されました。ですが、html的に<img2～というタグは見た事無いのですが、これは使っておいても問題ないのでしょうか？もし他に方法がございましたら教えてください。【css】-------------------------- img { border: 0; vertical-align:top; } .img1 { border: 0; } 【html】-------------------------- <table width="635" height="31" border="0" cellspacing="0" cellpadding="0" bgcolor="#999999"> <tr> <td width="635">タイトル</td> </tr> </table> <table width="635" border="0" cellspacing="0" cellpadding="0"> <tr> <td colspan="3"><img src="/img/space.gif" width="100%" height="10px" class="img1"/></td> </tr> <tr> <td width="170" rowspan="2"><img src="img/sample.gif" width="170" height="170" alt="test" /></td> <td width="20" rowspan="2"><img src="img/space.gif" width="20" height="170" class="img1" /></td> <td width="445" style="vertical-align:text-top"><img src="img/space.gif" width="100%" height="5" class="img1" />コピー<div class="guide-line"></div> </td> </tr> </table>
- ベストアンサー
- HTML
<img>タグにCSSのclass設定可能？
<img>タグにスタイルシートのclassは、直接設定できるのでしょうか？例えば,以下のようにテーブルの中にexample.jpgという画像があるとします。 <table border="4" width="250"> <tr> <td align="left"> <img src="example.jpg" width="100" height="100" borde="0"> </td> </tr> </table> この場合、<td align="left">とあるのでexample.jpgはセルの中で左揃えになって表示されます。質問1：ここで、スタイルシート使用して、<td align="left">のまま、example.jpgをセルの中で中央揃えにして表示したいとします。また、スタイルシートを使用して、example.jpgの上下には10pxのマージンを設定します（ここでは、スタイルシートに関する質問のため、あえてhspaceは<img>タグに使用しません。）。スタイルシートの指定は、<head></head>内で行なうことにします。この場合、以下のように<img>タグの中に直接classを設定できますか？できない場合は、その理由、正しいやり方等をお教え下さい。 <head> <style type="text/css"> .abc{ text-align:center; margin-top:10px; margin-bottom:10px: } </style> </head> <table border="4" width="250"> <tr> <td align="left"> <img class="abc" src="example.jpg" width="100" height="100" borde="0"> </td> </tr> </table> やはり、<div></div>で<img>タグを囲んで、 <head> <style type="text/css"> .abc{ text-align:center; margin-top:10px; margin-bottom:10px: } </style> </head> <table border="4" width="250"> <tr> <td align="left"> <div class="abc"> <img src="example.jpg" width="100" height="100" borde="0"> </div> </td> </tr> </table> などとするしか方法がないのでしょうか？質問2：また、スタイルシートを使用せずに、上記のテーブルで<td align="left">のままexample.jpgを中央揃えにする方法はあるのでしょうか？よろしくお願いします。
- ベストアンサー
- HTML

テーブル高さ指定タグで画像を同じサイズで表示する方法

テーブル高さ指定タグについて