画像をテーブルセルにフィットさせる[Pure HTML］

テーブルの td セルに画像をはめ込むにはどうしたらよいですか？[ピュアHTML]の場合

テーブルの td セルに画像をはめ込むには、以下のコードを試してみました。

HTMLのコードはこちらです。

<table border="1" bordercolor="#aaa" cellspacing="0" cellpadding="0">
<tr>
    <td><img width="100%" height="100%" src="http://dummyimage.com/68x68/000/fff" /></td>
</tr>
</table>

以下のスクリーンショットや[JsFiddle DEMO][1]を見るとわかるように、この画像はtdセルに収まらないのです。

ショット。

画像の説明を入力してください]2。

私は何を間違えているのでしょうか？

どんな提案でも素晴らしいです。

プログラミング
html
30日 6月 2013 в 5:40
9 ビュー
質問へのコメント (7)
ソリューション

インラインコンテンツでは、下に降りてくる文字（j、y、q）のためのスペースが残されています。

https://developer.mozilla.org/en-US/docs/Images,_Tables,_and_Mysterious_Gaps

いくつかの修正があります。

表示: ブロック;` を使用する

または、vertical-align: bottom;を使用します。

lrineau
編集した答え 27日 11月 2014 в 10:50
解説 (1)

それは display: block がすべてです :)

更新されました。

テーブルタグ、trタグ、tdタグができましたね。

<table>
  <tr>
    <td>

    </td>
  </tr>
</table>

例えば、table や td (幅を定義するもの) のプロパティが width: 360px; であるとします。ここで、htmlのコメントを実際の画像に置き換え、その画像のプロパティを例えば width: 100%; のように設定して、td` セルを完全に埋めようとすると、問題に直面することになります。

問題**は、テーブルセル（td）が画像で適切に埋め尽くされていないことです。セル下部のスペースが画像で覆われていないことに気づくでしょう（5pxのパディングがあるようなものです）。

**この問題を解決するにはどうしたらよいでしょうか？

あなたはテーブルを操作していますね？あなたの画像に display プロパティを追加して、以下のようにすればよいのです。

img {
  width: 100%;
  display: block;
}
lrineau
編集した答え 27日 11月 2014 в 10:48
解説 (4)

開発者用のツールを使って、tr, td, img にパディングやマージンがあるかどうか確認してください。

解説 (2)

純粋なHTMLソリューションでそれを行う場合は、必要に応じてテーブルの境界を削除できます。..or次のようにimgタグにalign = "center"属性を追加できます。

fiddle:http://jsfiddle.net/Lk2Rh/27/を参照してください。

しかし、これをCSSで処理する方が良いので、それをお勧めします。

-これが役に立てば幸いです。

解説 (0)