|
|||
Automatische Skalierung von IMG
Hallo,
das automatische Skalieren von Bildern funktioniert leider nicht ganz so, wie es sollte. Ich verwende diesen CSS-Code dafür: .IMGskalierbar { width: 100%; height: auto; width: auto\9; /* ie8 */ } und die meisten Bilder, die es betrifft, stecken in Tabellen. Pro <TD> maximal 1 Bild, Höhe fest 150 Pixel, Breite aber variabel. Wenn ich das Browserfenster verkleinere, schrumpfen auch die Bilder: soweit OK. ABER: alle Bilder werden auf die Breite der Tabellenspalte aufgezogen, die der Browser anhand irgendwelcher Kriterien festlegt (wahrscheinlich nach dem breitesten vorhandenen Bild). Bilder, die schmal sind, werden dann unnatürlich groß (und auch viel höher als die ursprünglichen 150 Pixel). Sehr schön zu sehen ist das z.B. hier: JASMS Anime-Synchronsprecher: Nonaka Ai bei dem Eintrag "Kaleido Star" (Folge 21): Melissa Das Bild von Melissa ist im Original gerade mal 120*150 Pixel groß. Natürlich lohnt sich bei so einem kleinen Bildchen keine Skalierung, aber bei zig tausenden von Bildern brauche ich eine Lösung, die universell funktioniert, ohne dass man von Hand Ausnahmen konfigurieren muss. Zudem werden Bilder, die nicht in Tabellen stecken, mit diesem Verfahren auf die volle Seitenbreite vergrößert, was sie ebenfalls absurd groß macht. Ich habe im CSS-Code mal width durch max-width ersetzt, aber dann skaliert gar nichts mehr. Was ich sonst noch so alles mit width und height ausprobiert habe, weiß ich inzwischen gar nicht mehr. Genutzt hat alles nicht. Ich hoffe, hier im Forum hat jemand eine Idee, wie man Bilder dazu bringt, sich verkleinern zu können, ohne aber größer als ihre Originalgröße zu werden. Vielen Dank schon mal! |
Sponsored Links |
|
|||
Zitat:
Beispiel: A Pen by Captain Anonymous Ob es eine Tabelle sein sol musst du selber entscheiden. Eine Tabelle ist für tabellarische Daten gedacht. HTML-Code:
<!DOCTYPE html> <html lang="de"> <head> <meta charset="utf-8"> <title>Titel der Webseite</title> <style type="text/css"> html { font-size: 100%; } body { margin: 0; } table { /* border-collapse: collapse; */ border: 2px solid #dddddd; width: auto; } table caption { font-size: 1.5rem; font-weight: bold; text-align: center; } table tr { } table td { margin: 0; padding: 2px; vertical-align: middle; border: 1px solid #aaa; } table td img { vertical-align: bottom; min-width: 100px; height: auto; } table tr:nth-child(3) td img { width: 80%; } table tr:nth-child(5) td img { width: 40%; } table tr:nth-child(9) td img { width: 100%; } </style> </head> <body> <table> <caption> Ob es eine Tabelle sein sol musst du selber entscheiden. <br> Eine Tabelle ist für tabellarische Daten gedacht. </caption> <tr> <td> </td> <td> </td> </tr> <tr> <td> </td> <td> </td> </tr> <tr> <td>Lorem ipsum dolor sit amet, consetetur sadipscing elitr.</td> <td><img src="http://jasms.de/d_bank/bilder/meme01.jpg" alt=""></td> </tr> <tr> <td> </td> <td> </td> </tr> <tr> <td>Lorem ipsum dolor sit amet.</td> <td><img src="http://jasms.de/d_bank/bilder/melissa02.jpg" alt=""></td> </tr> <tr> <td> </td> <td> </td> </tr> <tr> <td> </td> <td> </td> </tr> <tr> <td> </td> <td> </td> </tr> <tr> <td>Lorem ipsum dolor sit amet.</td> <td><img src="http://jasms.de/d_bank/bilder/kyouko06.jpg" alt=""></td> </tr> </table> </body> </html> MfG Roland |
Sponsored Links |
|
|||
Vielen Dank
Hallo Roland,
faszinierend! Und vielen Dank für diese ausführliche Antwort. Bei meiner Lösung mit dem width: 100%; height: auto; ist es, wenn ich das richtig verstanden habe, so, dass das Bild sich immer auf die Größe des nächsten übergeordneten Elements ausdehnt, sei ein ein TD oder die ganze Seite. Die Lösung, die ich mir überlegt habe, besteht darin, jedes IMG in ein entsprechend skaliertes DIV zu stecken. Nachteil: man muß jedes Bild einzeln anfassen. Aber leider ist das bei deiner Lösung auch so, nur steckt diese Information an einer anderen Stelle. Eine generelle Anweisung an den Renderer "kleiner skalieren ja, größer aber nicht" gibt es offenbar nicht. Schade. Trotzdem Danke. Man lernt immer etwas dazu. Viele Grüße, JASMS |
|
|||
Naja, als ich 1997 mit meinen Seiten angefangen habe, war das noch nicht verboten
Und das ist bei weitem nicht die einzige Altlast. Aber zweieinhalbtausend Seiten ändert man nicht mal so auf die Schnelle. Viele Grüße, JASMS |
|
|||
Doch, laut definition wars damals nicht mehr oder weniger verboten als heute. Es hat sich nur niemand daran gehalten, bzw. waren die technischen Möglichkeiten nicht so weit
Hat man ein Template für zweieinhalbtausend Seiten dann kann man auch diese innerhalb kürzester Zeit ändern. Außer man war auch hier faul und hat alle per Hand angelegt Aber gut, eine Seite, die seit dem letzten Jahrtausend nicht mehr aktualisert werden musste, kann nicht soo wichtig sein, dann kannst du auch ruhig bei den Tabellen bleiben. |
Stichwörter |
automatische skalierung, bilder, img, skalierung |
Themen-Optionen | |
Ansicht | |
|
|
Ähnliche Themen | ||||
Thema | Autor | Forum | Antworten | Letzter Beitrag |
rahmen um bilder- was mache ich falsch? | R0sa | CSS | 3 | 19.11.2012 17:35 |
Dreamweaver zerreist Listenstruktur in Vorschau | ICurtius | Site- und Layoutcheck | 9 | 15.10.2012 11:44 |
CSS Links border-bottom auf Img ausschalten nicht möglich? | Andimau | CSS | 1 | 15.06.2012 18:00 |
img in Tabellenkolonne wieder aktivieren | Rico | CSS | 5 | 29.06.2011 13:02 |
ie. Abstand über horizontaler Navi geht nicht weg. | tifi | CSS | 5 | 21.11.2006 18:17 |