テーブル内に画像を1枚表示したいです。
下記のようにIMGタグを用いると、画像が表示されますが、
横幅が100%の時の大きさで枠が表示
されます。横に余白があります。
この余白を無くして、テーブルの枠線が画像をピッタリ
囲む様にしたいです。
どなたか、ご教授願います。初心者なので詳しくお願い
します。
----------------------------------------------
<table border=1>
<tr>
<td >
<img src='./test_size/image2.jpg' width='50%' >
</td>
</tr>
</table>
No.1ベストアンサー
- 回答日時:
画像のサイズが「幅50%」とありますが、
これは画像を半分の幅で表示したいと言うことでしょうか。
そういうことでないのでしたら、下記のようにセル幅(td width)を画像サイズに合わせれば大丈夫ですよ。
<table border=1>
<tr>
<td width="画像の幅(ピクセル数)">
<img src="../test_size/image2.jpg" width="画像の幅(ピクセル数)" height="画像の高さ(ピクセル数">
</td>
</tr>
</table>
補足ですが、画像を表示する際、imgタグには画像サイズも明記するとブラウザ側での読み込みが速くなります。
No.3
- 回答日時:
テーブルで画像を囲い、そのテーブルの中の余白部分をすべて排除したいということでしたら、img要素のwidthをパーセントではなくピクセル単位で指定して、table要素かtd要素の横幅も画像の幅と同じように指定しておくとよいでしょう。
ついでに、table要素のcellpaddingを0にしておくと、完全にピッタリと画像と枠がくっつくと思います。あと、ソース内の改行コードは、ブラウザで表示する時に半角スペースとして解釈される場合があるので、隙間を詰めたい時にはそれらの改行をなくしておくのが良いでしょう(この場合は、<td></td>タグの前後の改行を消す)。
以下はソース例です。
<table border="1" cellpadding="0" width="画像の表示幅">
<tr>
<td><img src='./test_size/image2.jpg' width='画像の表示幅'></td>
</tr>
</table>
なお、テーブルに対してスタイルシートが適用される場合、tableタグ内のwidthよりもスタイルシートが優先されることがあるので、もし上記のようなソースにしても同じように余白が出る場合は、
<table border="1" cellpadding="0" style="width:画像の表示幅(px);">
<tr>
<td><img src='./test_size/image2.jpg' width='画像の表示幅'></td>
</tr>
</table>
このようにしてみてください。
ちなみに、img要素のwidthを50%にする場合、その上の要素の50%の横幅(読み込む画像のサイズの半分ではありません)になるように領域を確保するはずですので、この指定をしている場合には必ず画像の横に空白ができてしまうと思います。 表示したいサイズをピクセル単位で指定する必要があるでしょう。
参考になれば幸いです。
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
似たような質問が見つかりました
- HTML・CSS テーブルタグのセルの幅の一部だけを指定 1 2023/03/12 12:02
- JavaScript jQueryで同じクラス名のものを別物として扱いたい 1 2022/06/17 14:14
- JavaScript html5に変えるとスライドショーが消えてしまった。 3 2022/03/26 19:53
- HTML・CSS 自身のHPにYouTube動画を貼り付けるのが出来なくなり困ってます 1 2022/11/11 10:44
- PHP htmlで複数の個数入力欄を表示させるには 1 2022/09/20 03:11
- Visual Basic(VBA) Selenium.ChromeDriverの使い方について 7 2022/09/22 06:43
- JavaScript jQueryでのドラッグアンドドロップについて 1 2022/07/30 09:10
- HTML・CSS flex の各子要素を横幅 100% にしたい 1 2022/09/22 21:25
- Perl 画像が表示でnull; this.src 1 2022/04/19 11:31
- JavaScript EasyUIのSubGrid(jquery)におけるObjectに入れた連想配列について 1 2022/05/02 11:21
このQ&Aを見た人はこんなQ&Aも見ています
-
新NISA制度は今までと何が変わる?非課税枠の拡大や投資対象の変更などを解説!
少額から投資を行う人のための非課税制度であるNISAが、2024年に改正される。おすすめの銘柄や投資額の目安について教えてもらった。
-
テーブルのセルに画像をピッタリ表示するには
HTML・CSS
-
テーブルの横に画像を
HTML・CSS
-
TABLEのセルの中の文字を行単位、セル単位で色を変えたい
HTML・CSS
-
-
4
TRタグの余白をcssで設定するには
HTML・CSS
-
5
table内で画像と文字をセンター合わせするには?
HTML・CSS
-
6
テーブル内の文字サイズを変更したい。
HTML・CSS
-
7
table で画像をピッタリとくっつけたい
HTML・CSS
関連するカテゴリからQ&Aを探す
おすすめ情報
このQ&Aを見た人がよく見るQ&A
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
テーブルタグの中にdivを含めて...
-
HTMLでテーブルを横に並べる方法
-
箇条書きリストのすぐ横に画像...
-
テーブルの横に画像を
-
AccessVBAでオブジェクトの説明...
-
画像の横にテーブルを。。。
-
テーブルの上下右側にテーブル...
-
ウィンドウのサイズを変えても...
-
テーブルの位置を細かく指定し...
-
このタグの意味を教えてください
-
画像と、セルのつなぎ目に白い...
-
tableのheight指定が効かない
-
tableタグとformタグの組み合わせ
-
テーブルの任意の列を非表示に...
-
html でのテキスト結合について
-
TABLEのセルの中の文字を行単位...
-
cssで、表示されるテキストによ...
-
HTML5で、テーブル内tdタグの高...
-
table表を横に並べる際の間隔指定
-
HTML <td></td>タグ セル内余...
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
テーブルタグの中にdivを含めて...
-
テーブルの位置を細かく指定し...
-
ウィンドウのサイズを変えても...
-
ヘッダー固定のスクロールが可...
-
HTMLでテーブルを横に並べる方法
-
テーブルの横に画像を
-
テーブル内に画像を表示したい。
-
tableのheight指定が効かない
-
【CSS】縦横スクロールテーブル...
-
箇条書きリストのすぐ横に画像...
-
CSSで文字を一番下の中央に表示...
-
テーブルを中央に配置
-
Dreamweaverでテーブルの列幅を...
-
2つのテーブルを左右に表示した...
-
<SPAN>で文字を右揃えにしたい...
-
ホームページのテーブルに斜線...
-
プルダウンの表示位置
-
更新するとずれる?
-
複数のテーブルを無条件に中央...
-
テーブルでスクロールを同期したい
おすすめ情報