テーブルの 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。
私は何を間違えているのでしょうか?
どんな提案でも素晴らしいです。
インラインコンテンツでは、下に降りてくる文字(j、y、q)のためのスペースが残されています。
https://developer.mozilla.org/en-US/docs/Images,_Tables,_and_Mysterious_Gaps
いくつかの修正があります。
表示: ブロック;` を使用する
<img style="display:block;" width="100%" height="100%" src="http://dummyimage.com/68x68/000/fff" />
または、vertical-align: bottom;
を使用します。
<img style="vertical-align: bottom;" width="100%" height="100%" src="http://dummyimage.com/68x68/000/fff" />
それは display: block
がすべてです :)
更新されました。
テーブルタグ、trタグ、tdタグができましたね。
<table>
<tr>
<td>
<!-- your image goes here -->
</td>
</tr>
</table>
例えば、table
や td
(幅を定義するもの) のプロパティが width: 360px;
であるとします。ここで、htmlのコメントを実際の画像に置き換え、その画像のプロパティを例えば width: 100%;
のように設定して、td` セルを完全に埋めようとすると、問題に直面することになります。
問題**は、テーブルセル(td
)が画像で適切に埋め尽くされていないことです。セル下部のスペースが画像で覆われていないことに気づくでしょう(5pxのパディングがあるようなものです)。
**この問題を解決するにはどうしたらよいでしょうか?
あなたはテーブルを操作していますね?あなたの画像に display プロパティを追加して、以下のようにすればよいのです。
img {
width: 100%;
display: block;
}