it-swarm.com.de

Bild an Tabellenzelle anpassen [Pure HTML]

Wie passe ich ein Bild an eine td-Zelle an? [Reines HTML]

Ich habe unter dem folgenden Code versucht, ein Bild in die Tabelle td zu passen. 

HTML-Code ist hier:

<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>

Wie Sie im folgenden Screenshot und in JsFiddle DEMO sehen können, passt dieses Bild nicht in die td-Zelle.

Schuss:

enter image description here

Was mache ich falsch ?

Jeder Vorschlag wäre großartig.

9
Anis Hamidi

Inline-Inhalt lässt am Ende Platz für absteigende Zeichen (j, y, q):

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

Es gibt ein paar Korrekturen:

Verwenden Sie display: block;

<img style="display:block;" width="100%" height="100%" src="http://dummyimage.com/68x68/000/fff" />

oder benutze vertical-align: bottom;

<img style="vertical-align: bottom;" width="100%" height="100%" src="http://dummyimage.com/68x68/000/fff" />
11
LouD

Es geht nur um display: block :)

Aktualisierte :

Ok, Sie haben also die Tabelle, tr und td Tags:

<table>
  <tr>
    <td>
      <!-- your image goes here -->
    </td>
  </tr>
</table>

Nehmen wir an, Ihre table oder td (wie auch immer Sie Ihre Breite definieren) hat die Eigenschaft width: 360px;. Wenn Sie nun versuchen, den HTML-Kommentar durch das eigentliche Bild zu ersetzen, und diese Bildeigenschaft beispielsweise auf width: 100%; setzen, um die Zelletdvollständig auszufüllen, stehen Sie vor dem Problem.

Das Problem ist, dass Ihre Tabellenzelle (td) nicht richtig mit dem Bild gefüllt ist. Sie werden den Platz am unteren Rand der Zelle bemerken, den Ihr Bild nicht abdeckt (es ist wie 5 Pixel Auffüllung).

Wie lässt sich das auf einfachste Weise lösen?

Du arbeitest mit den Tischen, richtig? Sie müssen lediglich die Eigenschaft display zu Ihrem Bild hinzufügen, damit es die folgenden Eigenschaften hat:

img {
  width: 100%;
  display: block;
}
2
miksiii

wenn Sie dies mit einer reinen HTML-Lösung tun möchten, können Sie den Rand in der Tabelle löschen, wenn Sie möchten ... oder Sie können Ihrem IMG-Tag das Attribut align = "center" folgendermaßen hinzufügen:

<img align="center" width="100%" height="100%" src="http://dummyimage.com/68x68/000/fff" />

siehe die Geige: http://jsfiddle.net/Lk2Rh/27/

aber es ist immer noch besser, mit CSS umzugehen.

  • Ich hoffe diese Hilfe.
0
DikaDikz

Verwenden Sie das Werkzeug Ihres Entwicklers und prüfen Sie, ob die Variable tr, td oder img Auffüllung oder Ränder hat.

0
adamse