XHTMLforum

XHTMLforum (http://xhtmlforum.de/index.php)
-   CSS (http://xhtmlforum.de/forumdisplay.php?f=73)
-   -   Automatische Skalierung von IMG (http://xhtmlforum.de/showthread.php?t=71962)

JASMS 25.04.2015 18:17

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!

K.Roland 26.04.2015 14:48

Zitat:

Zitat von JASMS (Beitrag 544336)
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

JASMS 27.04.2015 08:40

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

cloned 27.04.2015 10:10

Zitat:

Zitat von JASMS (Beitrag 544353)
sei ein ein TD

Ich hoffe doch sehr stark, dass du keine Tabellen fürs Layout verwendest?

JASMS 27.04.2015 10:39

Zitat:

Zitat von cloned (Beitrag 544354)
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

cloned 27.04.2015 11:57

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 :D
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.


Alle Zeitangaben in WEZ +2. Es ist jetzt 15:48 Uhr.

Powered by vBulletin® Version 3.8.11 (Deutsch)
Copyright ©2000 - 2024, vBulletin Solutions, Inc.

© Dirk H. 2003 - 2023