zurück zur Startseite
  


Zurück XHTMLforum > (X)HTML und CSS > CSS
Seite neu laden Automatische Skalierung von IMG

Antwort
 
LinkBack Themen-Optionen Ansicht
  #1 (permalink)  
Alt 25.04.2015, 18:17
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 25.04.2015
Ort: München
Beiträge: 7
JASMS befindet sich auf einem aufstrebenden Ast
Standard 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!
Mit Zitat antworten
Sponsored Links
  #2 (permalink)  
Alt 26.04.2015, 14:48
Erfahrener Benutzer
XHTMLforum-Mitglied
 
Registriert seit: 24.06.2010
Beiträge: 528
K.Roland wird schon bald berühmt werden
Standard

Zitat:
Zitat von JASMS Beitrag anzeigen
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.
Bei unterschiedlichen Bildgrößen Dan die Originalgröße in Prozent umrechnen für jedes einzelne Bild.

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>&nbsp;</td>
  <td>&nbsp;</td>
</tr>
 <tr>
  <td>&nbsp;</td>
  <td>&nbsp;</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>&nbsp;</td>
  <td>&nbsp;</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>&nbsp;</td>
  <td>&nbsp;</td>
</tr>
 <tr>
  <td>&nbsp;</td>
  <td>&nbsp;</td>
</tr>
 <tr>
  <td>&nbsp;</td>
  <td>&nbsp;</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
Mit Zitat antworten
Sponsored Links
  #3 (permalink)  
Alt 27.04.2015, 08:40
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 25.04.2015
Ort: München
Beiträge: 7
JASMS befindet sich auf einem aufstrebenden Ast
Standard 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
Mit Zitat antworten
  #4 (permalink)  
Alt 27.04.2015, 10:10
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 30.01.2014
Beiträge: 2.247
cloned ist ein wunderbarer Anblickcloned ist ein wunderbarer Anblickcloned ist ein wunderbarer Anblickcloned ist ein wunderbarer Anblickcloned ist ein wunderbarer Anblickcloned ist ein wunderbarer Anblickcloned ist ein wunderbarer Anblick
Standard

Zitat:
Zitat von JASMS Beitrag anzeigen
sei ein ein TD
Ich hoffe doch sehr stark, dass du keine Tabellen fürs Layout verwendest?
Mit Zitat antworten
  #5 (permalink)  
Alt 27.04.2015, 10:39
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 25.04.2015
Ort: München
Beiträge: 7
JASMS befindet sich auf einem aufstrebenden Ast
Standard

Zitat:
Zitat von cloned Beitrag anzeigen
Ich hoffe doch sehr stark, dass du keine Tabellen fürs Layout verwendest?
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
Mit Zitat antworten
  #6 (permalink)  
Alt 27.04.2015, 11:57
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 30.01.2014
Beiträge: 2.247
cloned ist ein wunderbarer Anblickcloned ist ein wunderbarer Anblickcloned ist ein wunderbarer Anblickcloned ist ein wunderbarer Anblickcloned ist ein wunderbarer Anblickcloned ist ein wunderbarer Anblickcloned ist ein wunderbarer Anblick
Standard

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.
Mit Zitat antworten
Antwort

Stichwörter
automatische skalierung, bilder, img, skalierung

Themen-Optionen
Ansicht

Forumregeln
Es ist Ihnen nicht erlaubt, neue Themen zu verfassen.
Es ist Ihnen nicht erlaubt, auf Beiträge zu antworten.
Es ist Ihnen nicht erlaubt, Anhänge hochzuladen.
Es ist Ihnen nicht erlaubt, Ihre Beiträge zu bearbeiten.

BB-Code ist an.
Smileys sind an.
[IMG] Code ist an.
HTML-Code ist aus.
Trackbacks are an
Pingbacks are an
Refbacks are aus


Ä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


Alle Zeitangaben in WEZ +2. Es ist jetzt 04:01 Uhr.