Dynamische Bildgrösse
0 
Felix Riesterer
Dynamische Bildgrösse
Hallo zusammen
Ich habe ein Bild in eine Tabelle eingefügt. Wenn ich nun die Tabellengrösse ändere, passt sich die Bildgrösse leider nicht an. Auch wenn ich height="100%" habe. Ich möchte nicht immer manuell die Bildgrösse der Tabellengrösse anpassen.
Wie ist dieses Problem lösbar?
Ich hoffe mir kann jemand helfen.
-
Lieber Didier,
Ich möchte nicht immer manuell die Bildgrösse der Tabellengrösse anpassen.
Wie ist dieses Problem lösbar?jein, jedenfalls nicht mit HTML. Mit Javascript wäre eine Lösung denkbar. Aber wozu diese Verkrampfungen? Es gibt doch CSS!
Liebe Grüße aus Ellwangen,
Felix Riesterer.
-
Lieber Felix
Es gibt doch CSS!
Ich bin Anfänger auf diesem Gebiet. Wie ist das in CSS realisierbar?
Gruss, Didier
-
Lieber Didier,
Ich bin Anfänger auf diesem Gebiet. Wie ist das in CSS realisierbar?
dazu solltest Du Dir das CSS-Kapitel in SelfHTML zu Gemüte führen!
Hier ein Ansatz, der Dir beim Erlernen von CSS sicherlich manche Denkaufgabe gibt:
<html> <head> <title>Hunde und Katzen</title> <style type="text/css">h1 { text-align: center; } table.sonderklasse { margin: 0 auto; padding: 0; width: 250px; border: 1px solid black; border-collapse: collapse; } th.t-ueberschrift { font-style: italic; margin: 0; padding: 1em; border: 1px solid black; } td.t-inhalt { margin: 0; padding: 1em; border: 1px dotted black; } td.t-inhalt img { max-width: 120px; max-height: 120px; }</style> </head> <body> <h1>Hunde und Katzen</h1> <table class="sonderklasse"> <tr> <th class="t-ueberschrift">Hunde</th><th class="t-ueberschrift">Katzen</th> </tr> <tr> <td class="t-inhalt"><img src="pfad/hunde.jpg" alt="viele Hunde" /></td> <td class="t-inhalt"><img src="pfad/katzen.jpg" alt="viele Katzen" /></td> </tr> <tr> <td class="t-inhalt">Das hier sind viele Hunde.</td> <td class="t-inhalt">Hier sieht man viele Katzen.</td> </tr> </table> </body> </html>Wenn Du das Kapitel über CSS studierst, dann wirst Du in diesem Beispiel immer mehr verstehen. Es lohnt sich!
Ich habe oben Bilder in einer Tabellenzelle mit der Klasse t-inhalt als maximal 120 Pixel breit und lang definiert. Das funktioniert nicht im Internet-Explorer und führt auch zu verzerrten Bildern. Es ist daher ratsamer, diese CSS-Zeile weg zu lassen, um die Bildgröße mittels Javascript berechnen zu lassen. Aber wenn der User sein Javascript deaktiviert hat, dann klappt auch das nicht.
Liebe Grüße aus Ellwangen,
Felix Riesterer.
-
Hi!
h1 {}
table.sonderklasse {}
th.t-ueberschrift {}
td.t-inhalt {}
td.t-inhalt img {}Warum so viele Klassen? ~~~css table.sonderklasse {} table.sonderklasse th {} table.sonderklasse td {} table.sonderklasse td img {}selektieren dieselben Elemente.
Gruß aus Iserlohn
Martin
--
Selfcode: ie:{ fl:( br:^ va:) ls:# fo:| rl:( n4:( ss:| de:> js:) ch:? sh:( mo:| zu:)
Geht zum Weltspartag!-
Lieber Martin,
Warum so viele Klassen?
table.sonderklasse {}
table.sonderklasse th {}
table.sonderklasse td {}
table.sonderklasse td img {}> > selektieren dieselben Elemente. Du hast recht. Aber vielleicht will ich ja in weiteren Tabellenzellen KEINE Klassen-Effekte haben... Dann brauche ich die Freiheit, eine Klasse eben NICHT zu verwenden. Daher diese vielen Klassen. Gut. In dem von mir gebauten Beispiel tritt dieser Fall nicht ein. Aber wenn ich jetzt noch drei weitere Tabellenzeilen hinzugefügt hätte, dann hätte in deren Zellen die Möglichkeit bestanden, eben keine Klasse anzuwenden und damit keine der CSS-Effekte anzuzeigen. Das Beispiel war mit heißer Nadel gestrickt, daher ist es sicherlich nicht der Weisheit letzter Schluss, aber es eignet sich dazu, mal auszuprobieren, wie das mit den Klassen funktioniert. Liebe Grüße aus [Ellwangen](http://www.ellwangen.de/), Felix Riesterer.
-
-
-
-