width und height eines img mit CSS überschreiben? (IE-Problem)

[elven]

Hallo,

ich stehe vor einem Problem mit dem Internet Explorer (Version 6.0; ich weiß leider nicht, ob auch andere Versionen betroffen sind):

Ich arbeite mit einem CMS, das alle eingefügten Bilder bereits im HTML-Code mit width- und height-tags versieht. Grundsätzlich ist das ja wünschenswert.

Nun möchte ich aber fallweise diese Bilder auf Spaltenbreite skalieren. Das habe ich versucht über das eingebettete CSS-Stylesheet zu lösen: Ich setze also "height:100%;" und "width:auto;". In Firefox funktioniert alles wie gewünscht: Die CSS-Definitionen überschreiben die entsprechenden HTML-Tags, das Bild wird korrekt skaliert.
IE verhält sich leider anders: Die width wird aus dem CSS übernommen, die "auto"-Einstellung für height leider nicht. Das Bild endet also verzerrt. (Wie das aussieht, sieht man z.B. auf der Startseite meiner Site www.marcchristopher.at)

Dieses Problem tritt in zwei Fällen *nicht* auf:
* ...wenn das img-Tag kein eigenes height-Attribut besitzt. Darauf habe ich aber leider kaum Einfluss.
* ...oder, wenn im CSS für height eine absolute Höhe festgelegt wird. Ich brauche aber proportionale Skalierung.

Weiß jemand Rat? Irgendeine Idee?

Vielen Dank im voraus,
Marcus

[ChrisB]

Hi,

Nun möchte ich aber fallweise diese Bilder auf Spaltenbreite skalieren. Das habe ich versucht über das eingebettete CSS-Stylesheet zu lösen: Ich setze also "height:100%;" und "width:auto;". In Firefox funktioniert alles wie gewünscht: Die CSS-Definitionen überschreiben die entsprechenden HTML-Tags, das Bild wird korrekt skaliert.
IE verhält sich leider anders: Die width wird aus dem CSS übernommen, die "auto"-Einstellung für height leider nicht.

Nicht mal das scheint im IE 7 der Fall zu sein - der zeigt die Bilder in Originalgroesse an, passt also die Spalten- der Bildbreite an, und nicht umgekehrt.

Sieht ziemlich schoen zerschossen aus, deine Seite :-)

Weiß jemand Rat? Irgendeine Idee?

Wenn du kleine Versionen der Bilder anzeigen lassen willst - wieso laedst du dann keine kleinen Versionen der Bilder hoch?

Image-Skalierung in Browsern bietet idR. deutlich schlechtere Ergebnisse, als die ausgereiften Algorithmen von Grafikprogrammen - und hinsichtlich Traffic/Bandbreite ist es auch nicht sonderlich clever, riesengrosse Bilder einzubinden, wenn man nur sehr kleine anzeigen will.

MfG ChrisB

[elven]

IE verhält sich leider anders: Die width wird aus dem CSS übernommen, die "auto"-Einstellung für height leider nicht.

Nicht mal das scheint im IE 7 der Fall zu sein - der zeigt die Bilder in Originalgroesse an, passt also die Spalten- der Bildbreite an, und nicht umgekehrt.

Sieht ziemlich schoen zerschossen aus, deine Seite :-)

Hmm, da war ja IE ein Rückschritt... ;-)

Weiß jemand Rat? Irgendeine Idee?

Wenn du kleine Versionen der Bilder anzeigen lassen willst - wieso laedst du dann keine kleinen Versionen der Bilder hoch?

Das Problem ist, dass ein und derselbe Artikel fallweise seitenfüllend oder eben nur in Spaltenbreite (als Teaser) angezeigt wird. Ohne Scripts kann ich ja nicht steuern, dass in diesem Fall ein anderes Bild geladen werden soll.

Image-Skalierung in Browsern bietet idR. deutlich schlechtere Ergebnisse, als die ausgereiften Algorithmen von Grafikprogrammen - und hinsichtlich Traffic/Bandbreite ist es auch nicht sonderlich clever, riesengrosse Bilder einzubinden, wenn man nur sehr kleine anzeigen will.

Stimmt ja, hast ja recht. Ich hätte für diese kleinen Vorschaubildchen diese probleme schon in Kauf genommen. Funktioniert aber anscheinend ohnehin nicht...

[suit]

Ich arbeite mit einem CMS, das alle eingefügten Bilder bereits im HTML-Code mit width- und height-tags versieht. Grundsätzlich ist das ja wünschenswert.

breite und höhe für bilder ist meines erachtens nicht wünscheswert, wenn diese bereits im richtigem format vorliegen - skaleren mittels browser ist eine schlechte idee

Nun möchte ich aber fallweise diese Bilder auf Spaltenbreite skalieren.

mit css eine schleche idee

Weiß jemand Rat? Irgendeine Idee?

entferne sämtliche breite/höhe angaben aus dem html (die haben dort ansich nix verloren)

wenn du unbedingt mit browser skalieren willst, steht dir dann per css nix mehr im weg

[ChrisB]

Hi,

entferne sämtliche breite/höhe angaben aus dem html (die haben dort ansich nix verloren)

Wieso das nicht?

Wenn das Bild Teil des Inhaltes ist, dann haben auch die Angaben zu seinen Maszen ihre Berechtigung im HTML ...

MfG ChrisB

[suit]

Wieso das nicht?

Wenn das Bild Teil des Inhaltes ist, dann haben auch die Angaben zu seinen Maszen ihre Berechtigung im HTML ...

es hat insofern vorteile, wenn man auch langsame clients ansprechen möchte, damit der "platzhaltereffekt" eines noch nicht geladenen bilds zum tragen kommt und das layout nicht "springt"

bilder im fliesstext verschieben ggf auch nach dem laden noch inhalte - von der seite ist es sicher ab und an interessant, die breite und höhe anzugegeben - aber es ist keine pflichtanforderung - eine berechtigung haben sie natürlich

von der seite würde ich sie prinzipiell weglassen, da die meisten bild im fliesstext (thumbnails) ohnehin sehr schnell geladen werden - zudem sind inhaltsbilder meistens irgendwo recht uniform von der größe sonst sehen bebilderte artikel/texte nach nichts aus, hier lassen sich die entsprechenden angaben problemlos im css platzieren

oder aber man nimmt eine serverseitige sprache die die eingebundenen bilder automatisch mit breite/höhe versieht - aber händische angaben sind schlecht, was macht man wenn das quellbild bearbeitet (zb zugeschnitten) wird?

wenn das layout der seite selbst "springt" hat man offenbar bilder zu layoutzwecken missbraucht, dann ist das problem aber ohnehin wo anders zu suchen

[elven]

Ich arbeite mit einem CMS, das alle eingefügten Bilder bereits im HTML-Code mit width- und height-tags versieht. Grundsätzlich ist das ja wünschenswert.

breite und höhe für bilder ist meines erachtens nicht wünscheswert, wenn diese bereits im richtigem format vorliegen - skaleren mittels browser ist eine schlechte idee

Die height- und width-Attribute entsprechen im Normalfall den tatsächlichen Bildabmessungen (ich verwende die Attribute also im Normalfall nicht um zu skalieren). Das ist ja sinnvoll, weil der Browser dann bereits beim Laden die Abmessungen kennt.

Abgesehen davon habe ich leider auf die Einbindung dieser Attribute nicht viel Einfluss, außer ich greife in den Code des CMS ein.

Nun möchte ich aber fallweise diese Bilder auf Spaltenbreite skalieren.
mit css eine schleche idee

Andere Idee?

Weiß jemand Rat? Irgendeine Idee?
entferne sämtliche breite/höhe angaben aus dem html (die haben dort ansich nix verloren)

Siehe oben.

[suit]

Abgesehen davon habe ich leider auf die Einbindung dieser Attribute nicht viel Einfluss, außer ich greife in den Code des CMS ein.

definiere CMS

Nun möchte ich aber fallweise diese Bilder auf Spaltenbreite skalieren.
mit css eine schleche idee

Andere Idee?

serverseitig - bei flexiblen layouts ist das ein dilemma
ggf mit javascript die breite der spalte abgreifen und je nach breite ein bild in der richtigen größe (vom server berechnet) nachladen
ansonsten siehts nicht so toll aus

[elven]

Abgesehen davon habe ich leider auf die Einbindung dieser Attribute nicht viel Einfluss, außer ich greife in den Code des CMS ein.
definiere CMS

Konkret: Drupal mit CCK-Feld fürs img.

Nun möchte ich aber fallweise diese Bilder auf Spaltenbreite skalieren.
mit css eine schleche idee

Andere Idee?
serverseitig - bei flexiblen layouts ist das ein dilemma
ggf mit javascript die breite der spalte abgreifen und je nach breite ein bild in der richtigen größe (vom server berechnet) nachladen
ansonsten siehts nicht so toll aus

Hört sich irgendwie unschön an, diese Lösung.
Ich würde die geringere Qualität des Bildes bei Browserskalierung schon in Kauf nehmen, wenn's denn überhaupt klappen würde.

[suit]

Abgesehen davon habe ich leider auf die Einbindung dieser Attribute nicht viel Einfluss, außer ich greife in den Code des CMS ein.
definiere CMS

Konkret: Drupal mit CCK-Feld fürs img.

leider nicht mein gebiet

Hört sich irgendwie unschön an, diese Lösung.

ja, ist es auch

Ich würde die geringere Qualität des Bildes bei Browserskalierung schon in Kauf nehmen, wenn's denn überhaupt klappen würde.

dann hol dir mit javascript alle img elemente und entferne dort die beiden betreffenden attribute ganz einfach

[Engin]

Ave elven!

Dieses Problem tritt in zwei Fällen *nicht* auf:
* ...wenn das img-Tag kein eigenes height-Attribut besitzt. Darauf habe ich aber leider kaum Einfluss.
* ...oder, wenn im CSS für height eine absolute Höhe festgelegt wird. Ich brauche aber proportionale Skalierung.

Weiß jemand Rat? Irgendeine Idee?

Schon mit !important rum probiert?
Es könnte an der Spezifität, Gewichtung der Selektoren liegen.

Grüße aus H im R an elven,
  Primus Enginus*

[elven]

Dieses Problem tritt in zwei Fällen *nicht* auf:
* ...wenn das img-Tag kein eigenes height-Attribut besitzt. Darauf habe ich aber leider kaum Einfluss.
* ...oder, wenn im CSS für height eine absolute Höhe festgelegt wird. Ich brauche aber proportionale Skalierung.

Weiß jemand Rat? Irgendeine Idee?

Schon mit !important rum probiert?
Es könnte an der Spezifität, Gewichtung der Selektoren liegen.

Leider schon probiert. !important macht keinen Unterschied.