Wie kann das Seitenverhältnis beibehalten werden, wenn ein Bild mit einer (CSS-)Dimension in IE6 skaliert wird?

Hier ist das Problem. Ich habe ein Bild:

<img alt="alttext" src="https://stackoverflow.com/questions/757782/filename.jpg"/>

Beachten Sie, dass keine Höhe oder Breite angegeben ist.

Auf bestimmten Seiten möchte ich nur ein Vorschaubild anzeigen. Ich kann das HTML nicht ändern, also verwende ich das folgende CSS:

.blog_list div.postbody img { width:75px; }

Was (in den meisten Browsern) eine Seite mit einheitlich breiten Miniaturansichten ergibt, alle mit beibehaltenen Seitenverhältnissen.

Im IE6 wird das Bild jedoch nur in der im CSS angegebenen Dimension skaliert. Die „natürliche“ Höhe bleibt erhalten.

Hier ist ein Beispiel für zwei Seiten, die das Problem veranschaulichen:

• Die Liste, die Miniaturansichten anzeigen sollte
• Ein einzelner Blogbeitrag, der das Bild in voller Größe zeigt.

Ich wäre für alle Vorschläge sehr dankbar, möchte aber darauf hinweisen, dass ich (aufgrund der Einschränkungen der vom Kunden gewählten Plattform) nach etwas suche, das keine Änderung des HTML-Codes beinhaltet. CSS wäre auch Javascript vorzuziehen.

EDIT: Sollte erwähnen, dass die Bilder unterschiedliche Größen und Seitenverhältnisse haben.

Adam Luter hat mir die Idee dazu gegeben, aber es stellte sich als ganz einfach heraus:

img {
  width:  75px;
  height: auto;
}

IE6 skaliert das Bild jetzt fein und dies scheint das zu sein, was alle anderen Browser standardmäßig verwenden.

Danke aber für die beiden Antworten!

Ich bin froh, dass das geklappt hat, also musstest du wohl explizit ‘auto’ auf IE6 setzen, damit es andere Browser nachahmt!

Ich habe kürzlich eine andere Technik zum Skalieren von Bildern gefunden, die wiederum für Hintergründe entwickelt wurde. Diese Technik hat einige interessante Eigenschaften:

1. Das Bildseitenverhältnis wird beibehalten
2. Die Originalgröße des Bildes wird beibehalten (das heißt, es kann niemals schrumpfen, sondern nur wachsen).

Das Markup basiert auf einem Wrapper-Element:

<div id="wrap"><img src="https://stackoverflow.com/questions/757782/test.png" /></div>

Mit dem obigen Markup verwenden Sie dann diese Regeln:

#wrap {
  height: 100px;
  width: 100px;
}
#wrap img {
  min-height: 100%;
  min-width: 100%;
}

Wenn Sie dann die Größe des Wrappers steuern, erhalten Sie die interessanten Skalierungseffekte, die ich oben aufgeführt habe.

Betrachten Sie zur Verdeutlichung den folgenden Basiszustand: Ein Container mit 100 x 100 und ein Bild mit 10 x 10. Das Ergebnis ist ein skaliertes Bild von 100×100.

1. Ausgehend vom Basiszustand wird der Container auf 20 x 100 skaliert, das Bild bleibt auf 100 x 100 skaliert.
2. Ausgehend vom Grundzustand wird das Bild auf 10×20 geändert, die Bildgröße wird auf 100×200 geändert.

Mit anderen Worten, das Bild ist immer da wenigstens so groß wie der Behälter, wird aber skaliert Darüber hinaus um das Seitenverhältnis beizubehalten.

Dies ist wahrscheinlich für Ihre Site nicht nützlich und funktioniert nicht in IE6. Aber es ist nützlich, um einen skalierten Hintergrund für Ihr Ansichtsfenster oder Ihren Container zu erhalten.

Nun, mir fällt ein CSS-Hack ein, der dieses Problem lösen wird.

Sie könnten die folgende Zeile in Ihre CSS-Datei einfügen:

* html .blog_list div.postbody img { width:75px; height: SpecifyHeightHere; } 

Der obige Code wird nur von IE6 gesehen. Das Seitenverhältnis wird nicht perfekt sein, aber Sie könnten es einigermaßen normal aussehen lassen. Wenn Sie es wirklich perfekt machen wollten, müssten Sie Javascript schreiben, das die ursprüngliche Bildbreite liest, und das Verhältnis entsprechend einstellen, um eine Höhe anzugeben.

Die einzige Möglichkeit, eine explizite Skalierung in CSS durchzuführen, besteht darin, Tricks wie found zu verwenden hier.

Nur IE6, Sie könnten auch Filter verwenden (siehe PNGFix). Aber um sie automatisch auf die Seite anzuwenden, wird Javascript benötigt, obwohl dieses Javascript in die CSS-Datei eingebettet werden könnte.

Wenn Sie Javascript benötigen, möchten Sie vielleicht, dass Javascript den fehlenden Wert für die Höhe ausfüllt, indem Sie das Bild untersuchen, sobald der Inhalt geladen wurde. (Leider habe ich keine Referenz für diese Technik).

Abschließend, und verzeihen Sie mir diese Seifenkiste, möchten Sie vielleicht die IE6-Unterstützung in dieser Angelegenheit meiden. Sie könnten hinzufügen _width: auto nach ihrem width: 75px Regel, damit IE6 das Bild zumindest vernünftig rendert, auch wenn es die falsche Größe hat.

Ich empfehle die letzte Lösung einfach, weil IE6 auf dem Weg nach draußen ist: 20% und geht fast ein Prozent im Monat. Außerdem stelle ich fest, dass Ihre Website Freizeitaktivitäten ist und sich im Vereinigten Königreich befindet. Beides trägt dazu bei, dass die demografische Entwicklung vom IE6 abweicht: Die IE6-Nutzung sinkt an Wochenenden um fast 40 % (kein Zitat, sorry), und Großbritannien hat eine viel niedrigere IE6-Demografie (wieder kein Zitat, sorry).

Viel Glück!