Bild an Tabellenzelle anpassen [Pure HTML]

Wie passe ich Bild an Tabelle an? td Zelle? [Pure HTML]Bild an Tabellenzelle anpassen [Pure HTML]

Ich habe unten Code versucht, ein Bild in Tabelle td Zelle 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 Screenshot in folgenden und in JsFiddle DEMO sehen können, dass Bild nicht zu td Zelle passt.

Shot:

enter image description here

Was mache ich falsch?

Jeder Vorschlag wäre genial.

Quelle

2013-06-30 Hamed Kamrava

'img {Anzeige: Block; } ' –

@MattWhipple. Ich sagte reines HTML ... –

reines HTML sollte Styling nicht tun. In dem Moment, in dem es funktioniert, würde es außerhalb der 90er Jahre nicht als rein angesehen werden. –

Inline-Inhalt läßt Raum an der Unterseite für Zeichen, die absteigen (j, y, q):

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

Es gibt ein paar fixen:

Verwenden display: block;

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

oder verwenden Sie vertical-align: bottom;

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

Quelle

2013-06-30 18:03:44 LouD

Hier ist eine Geige Beispiel für beide: http://jsfiddle.net/sj9YE/ – LouD

Verwenden Sie Ihr Entwicklertool Ihrer Wahl und prüfen Sie, ob tr, td oder img Padding oder Ränder hat.

Quelle

2013-06-30 17:45:07 adamse

Vielen Dank, aber können Sie mehr erklären? Ich bin verwirrt –

Verwenden Sie zum Beispiel Chrome Developer Tools können Sie mit der rechten Maustaste auf ein Element klicken und überprüfen, ob es Ränder und Polsterungen auf den Elementen gibt, die das Bild umschließen. – adamse

Es geht um display: block :)

Aktualisiert:

Ok, so dass Sie die Tabelle, tr und td-Tags:

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

Können sagen, Ihre table oder td (was auch immer Definieren Sie Ihre Breite) hat Eigenschaft width: 360px;. Wenn Sie jetzt versuchen, den HTML-Kommentar durch das tatsächliche Bild zu ersetzen und die Bildeigenschaft für Beispiel width: 100%; setzen, die die Zelle td vollständig ausfüllen sollte, werden Sie das Problem stellen.

Das Problem ist, dass Ihre Tabelle Zelle (td) nicht ordnungsgemäß mit dem Bild gefüllt ist. Sie werden den Platz am unteren Rand der Zelle bemerken, den Ihr Bild nicht abdeckt (es ist wie 5px Padding).

Wie löst man das am einfachsten?

Sie arbeiten mit den Tabellen, richtig?Sie müssen nur die Anzeige Eigenschaft zu Ihrem Bild hinzuzufügen, so dass sie das Folgende:

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

Quelle

2014-11-25 15:10:35 miksiii

Die Antwort sollte genauer sein, in meiner Meinung. – lrineau

Okay, wenn Sie also eine Tabelle und ein Bild in der Td-Zelle gespeichert haben - Ihre Td hat etwas Breite, oder? Um das Bild an diese Breite anzupassen, müssen Sie Ihrem Bild die Eigenschaft ** display: block; ** zuweisen. – miksiii

Eigentlich ist es eher im Geiste von StackOverflow, dass Sie Ihre Antwort bearbeiten, anstatt Genauigkeit in einem Kommentar zur Antwort zu geben. :-) – lrineau

, wenn Sie es mit reiner HTML-Lösung tun mögen, können Sie die Grenze in der Tabelle löschen, wenn Sie möchten. ..oder können Sie align = „center“ -Attribut auf Ihre img-Tag wie folgt hinzufügen:

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

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

aber immer noch besser es um die Handhabung dieses mit CSS, schlage ich vor Ihnen.

Ich hoffe diese Hilfe.

Quelle

2016-06-02 13:27:53 DikaDikz

einfach downvote? kein Kommentar/erklären? – DikaDikz

Bild an Tabellenzelle anpassen [Pure HTML]

Antwort

Verwandte Themen