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.
quelle
Antworten:
Adam Luter gab mir die Idee dazu, aber es stellte sich tatsächlich als sehr einfach heraus:
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!
quelle
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:
Das Markup basiert auf einem Wrapper-Element:
In Anbetracht des obigen Markups verwenden Sie dann diese Regeln:
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.
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.
quelle
Nun, ich kann mir einen CSS-Hack vorstellen, der dieses Problem beheben wird.
Sie können Ihrer CSS-Datei die folgende Zeile hinzufügen:
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.
quelle
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: auto
nach Ihrerwidth: 75px
Regel 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!
quelle