web-dev-qa-db-ger.com

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 ein Vorschaubild anzeigen. Ich kann den HTML-Code nicht ändern, daher verwende ich das folgende CSS:

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

Dadurch wird (in den meisten Browsern) eine Seite mit einheitlich breiten Miniaturansichten erstellt, wobei alle Seitenverhältnisse beibehalten werden.

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 zwei Seiten, die das Problem veranschaulichen:

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 Ausschau halte, 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.

92
Tom Wright

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 nun gut und dies scheint das zu sein, was alle anderen Browser standardmäßig verwenden.

Vielen Dank für beide Antworten!

198
Tom Wright

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

Tatsächlich habe ich 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 (dh es kann niemals verkleinert werden, sondern nur vergrößert werden)

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.

Berücksichtigen Sie explizit den folgenden Basisstatus: Ein Container mit den Abmessungen 100 x 100 und ein Image mit den Abmessungen 10 x 10. Das Ergebnis ist ein skaliertes Bild von 100x100.

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

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

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

14
Adam Luter

Nun, ich kann mir einen CSS-Hack vorstellen, der dieses Problem löst.

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 angezeigt. Das Seitenverhältnis wird nicht perfekt sein, aber Sie könnten es etwas normal aussehen lassen. Wenn Sie es wirklich perfektionieren 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.

2
jgallant

Die einzige Möglichkeit, eine explizite Skalierung in CSS durchzuführen, besteht in der Verwendung von Tricks wie gefunden hier .

Nur IE6, Sie können auch Filter verwenden (check out PNGFix ). Um sie jedoch automatisch auf die Seite anzuwenden, muss Javascript aktiviert sein. Dieses Javascript kann jedoch in die CSS-Datei eingebettet sein.

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

Schließlich und entschuldigen Sie mich für 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, so dass der IE6 das Bild zumindest angemessen wiedergibt, auch wenn es die falsche Größe hat.

Ich empfehle die letzte Lösung, nur weil IE6 auf dem Weg ist: 20% und fast ein Prozent pro Monat . Außerdem stelle ich fest, dass sich Ihre Website in der Freizeit und im Vereinigten Königreich befindet. Beides trägt dazu bei, dass die demografische Neigung zu einer Abkehr vom Internet Explorer 6 besteht: Die Internet Explorer 6-Nutzung sinkt am Wochenende um fast 40% (ohne Angabe von Gründen), und in Großbritannien ist die demografische Zahl der Internet Explorer 6-Nutzer wesentlich niedriger (wiederum ohne Angabe von Gründen).

Viel Glück!

2
Adam Luter