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

92

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:

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.

Tom Wright
quelle
Ich dokumentiere verschiedene Fehler. Ich konnte diesen nicht reproduzieren. Denken Sie, Sie könnten einen einfachen Testfall daraus machen?
Meder Omuraliev
Um ehrlich zu sein, mache ich nicht mehr viel Webdesign und bin mir nicht sicher, wo ich ohne Probleme eine IE6-Installation finden könnte. Ich werde es aber bewerben.
Tom Wright

Antworten:

197

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!

Tom Wright
quelle
2
Ich würde auch empfehlen, Folgendes zu verwenden: "object-fit: include;" oder "Objektanpassung: Füllen;" wenn das nicht genug für dich ist
Magnus
5
@Magnus Laut caniuse.com wird die CSS3-Objektanpassung von keinem aktuellen Browser (zum Zeitpunkt des Schreibens) unterstützt und wurde immer nur von Opera unterstützt. In IE6 wird es kaum funktionieren.
Richard Hauer
Sollte das auch umgekehrt funktionieren? (dh Höhe, automatische Breite einstellen?) Funktioniert das mit alten IEs?
Josinalvo
14

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.

Adam Luter
quelle
3
Wenn Sie DOWN-Bilder in einen Container mit beibehaltenem Seitenverhältnis skalieren möchten, scheint dies die maximale Höhe und maximale Breite anstelle der minimalen Höhe / minimalen Breite zu sein, wodurch kleinere Bilder vergrößert werden.
Karsten
Ich mag diese Antwort und @Karsten ist Wright über maximale Höhe und maximale Breite.
Ramsharan
2

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.

jgallant
quelle
2

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!

Adam Luter
quelle