Wie kann das Seitenverhältnis beim Skalieren von Bildern mit einer CSS-Dimension in IE6 beibehalten werden?

Hier ist das Problem. Ich habe ein Bild:

<img alt="alttext" src="filename.jpg"/>

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

Auf bestimmten Seiten möchte ich nur eine Miniaturansicht anzeigen. Ich kann das HTML nicht ändern, daher verwende ich das folgende CSS:

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

Dadurch wird (in den meisten Browsern) eine Seite mit gleichmäßig breiten Miniaturansichten erstellt, die alle Seitenverhältnisse beibehalten.

In IE6 wird das Bild jedoch nur in der im CSS angegebenen Dimension skaliert. Es behält die "natürliche" Höhe.

Hier ist ein Beispiel für ein Seitenpaar, das das Problem veranschaulicht:

• Die Liste, in der Miniaturansichten angezeigt werden sollen
• Ein einzelner Blog-Beitrag, 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, bei dem das HTML nicht geändert werden muss. CSS wäre auch Javascript vorzuziehen.

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

Adam Luter gab mir die Idee dazu, aber es stellte sich tatsächlich als sehr einfach heraus:

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

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

Vielen Dank für beide Antworten!

Ich bin froh, dass das geklappt hat, also musste man auf IE6 explizit 'auto' 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 bleibt erhalten
2. Die Originalgröße des Bildes bleibt erhalten (das heißt, es kann niemals schrumpfen, sondern nur wachsen).

Das Markup basiert auf einem Wrapper-Element:

<div id="wrap"><img src="test.png" /></div>

In Anbetracht des obigen Markups 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 Skaleneffekte, die ich oben aufführe.

Um explizit zu sein, betrachten Sie den folgenden Basiszustand: Ein Container mit einer Größe von 100 x 100 und ein Bild mit einer Größe von 10 x 10. Das Ergebnis ist ein skaliertes Bild von 100 x 100.

1. Ab dem Basiszustand wird die Größe des Containers auf 20 x 100 geändert, und die Größe des Bildes bleibt auf 100 x 100 geändert.
2. Ab dem Basiszustand wird das Bild auf 10x20 geändert, die Bildgröße auf 100x200.

Mit anderen Worten, das Bild ist immer mindestens so groß wie der Container, wird jedoch darüber hinaus skaliert , um das Seitenverhältnis beizubehalten.

Dies ist wahrscheinlich nicht nützlich für Ihre Site und funktioniert in IE6 nicht. Es ist jedoch hilfreich, einen skalierten Hintergrund für Ihren Ansichtsport oder Container zu erhalten.

Nun, ich kann mir einen CSS-Hack vorstellen, der dieses Problem beheben wird.

Sie können Ihrer CSS-Datei die folgende Zeile hinzufügen:

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

Der obige Code wird nur von IE6 angezeigt. Das Seitenverhältnis ist nicht perfekt, aber Sie könnten es etwas normal aussehen lassen. Wenn Sie es wirklich perfekt machen möchten, müssen Sie ein 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 die hier beschriebenen zu verwenden .

Nur IE6 , Sie können auch Filter verwenden ( siehe PNGFix ). Das automatische Anwenden auf die Seite erfordert jedoch Javascript, obwohl dieses Javascript in die CSS-Datei eingebettet sein könnte.

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

Und schließlich, und entschuldigen Sie mich für diese Seifenkiste, möchten Sie möglicherweise die IE6-Unterstützung in dieser Angelegenheit vermeiden. Sie können _width: autonach Ihrer width: 75pxRegel hinzufügen , damit IE6 das Bild zumindest angemessen rendert, selbst 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 fast ein Prozent pro Monat . Außerdem stelle ich fest, dass Ihre Website in der Freizeit und in Großbritannien ist. Beides trägt dazu bei, dass sich die demografische Tendenz von IE6 entfernt: Die Nutzung von IE6 sinkt an Wochenenden um fast 40% (kein Zitat, sorry), und Großbritannien hat eine viel niedrigere demografische IE6 (wieder kein Zitat, sorry).

Viel Glück!