wiki: img-Elemente in HTML

[michaah]

Ich würde die folgende Undeutlichkeit selber korrigieren wenn ich sie bearbeiten dürfte:

(optionale) Breiten- und Höhenangaben/wiki/HTML/Multimedia_und_Grafiken/Grafiken#.28optionale.29_Breiten-_und_H.C3.B6henangaben ... Wenn Sie als Maßeinheit Pixel angeben wollen, notieren Sie die Maße ohne Einheitenangabe. Während bei HTML4 noch Prozentangaben zulässig waren, ist diese Einheit im HTML5-Standard als Breiten- bzw. Höhenangabe für Bilder gestrichen worden: Es sind nur noch Angaben in Pixeln (das heißt ohne Einheit) erlaubt.

ein paar Zeilen weiter dann:

responsives Design > (RWD)/wiki/HTML/Multimedia_und_Grafiken/Grafiken#responsives_Design_.28RWD.29 Empfehlung: Mit prozentualen Breitenangaben für Bild und Elternelement können Sie das Seitenlayout automatisch an den Viewport anpassen.

Ich erkenne beim mehrmaligen Durchlesen dann schon, dass es einmal um html, das andere mal um css geht. Der technische Unterschied besteht wohl darin, dass die html Angabe ohne weiteren gestalterischen Einfluß wie im Text beschrieben dem Browser lediglich hilft die Größe schnell zu erkennen, wohingegen im CSS eine Skalierung definiert werden kann.

Ich würde das deshalb wie folgt ändern um den Unterschied den Nicht-Fachmännern wie mir augenfälliger zu machen:

... Es sind nur noch Angaben in Pixeln (das heißt ohne Einheit) erlaubt, die so die tatsächliche Auflösung bekanntgeben ohne die Skalierung zu beeinflussen (Letzteres ist nur über CSS möglich, s.u.).

[djr]

Ich würde das deshalb wie folgt ändern um den Unterschied den Nicht-Fachmännern wie mir augenfälliger zu machen:

... Es sind nur noch Angaben in Pixeln (das heißt ohne Einheit) erlaubt, die so die tatsächliche Auflösung bekanntgeben ohne die Skalierung zu beeinflussen (Letzteres ist nur über CSS möglich, s.u.).

Das ist so nicht richtig!

Die Attribute width und height legen fest, wie viel Platz auf der Seite für das Bild vorgesehen ist. Dieser Bereich wird dann für das kommende Bild freigehalten. Sobald das Bild dann geladen ist, wird damit der reservierte Raum ausgefüllt. D.h. auch, dass wenn das Bild eine andere Größe als der reservierte Raum hat, wird es gestreckt/gestaucht und erscheint u. U. unscharf oder verzerrt.

Siehe hier mein Beispiel: https://jsfiddle.net/c4xh3dp7

[michaah]

Das ist so nicht richtig!

Ok.

Ich hätte bei meiner erster Version bleiben sollen, die in etwa lautete: Ich durchblicke den technischen Unterschied nicht, aber es ist unverständlich formuliert. Ich habe dann auf der Beispielseite herumgespielt und glaubte (wie sich nun zeigt fälschlicherweise) dass es so funktioniert wie oben beschrieben.

Es ist eben nicht augenfällig, dass "keine Prozentangaben" nur für html gelten. Und wenn man dann mit CSS und %-Angaben scaliert, zu was ist dann eine "Reservierung von Platz" in px noch gut?

Danke aber für deine Berichtigung.

[Matthias Apsel]

Hallo michaah,

Es ist eben nicht augenfällig, dass "keine Prozentangaben" nur für html gelten.

Hm. Eigentlich^[1] schon. Der Artikel bezieht sich beinahe ausschließlich auf das HTML.

Und wenn man dann mit CSS und %-Angaben scaliert, zu was ist dann eine "Reservierung von Platz" in px noch gut?

Damit der Seitenaufbau ohne hin- und herspringende Inhalte erfolgen kann, auch wenn die Bilder noch nicht geladen wurden.

Ich habe aber die Seite etwas umstrukturiert, wird es so klarer?

Bis demnächst
Matthias

---

1. Eigentlich gibt's eigentlich nicht. ↩︎

[michaah]

Hm. Eigentlich[^eigentlich] schon. Der Artikel bezieht sich beinahe ausschließlich auf das HTML.

Das ist wohl richtig. Aber nur aus der Perspektive dessen der sowieso versteht was er schreibt. Aus der Sicht dessen, der sucht ist das eben nicht augenfällig. Ich räume aber ein dass ich derzeit wohl ausschließlich CSS Sachen im Wiki nachlese und somit nicht in der passenden Spur war.

Und wenn man dann mit CSS und %-Angaben scaliert, zu was ist dann eine "Reservierung von Platz" in px noch gut?

Damit der Seitenaufbau ohne hin- und herspringende Inhalte erfolgen kann, auch wenn die Bilder noch nicht geladen wurden.

Die unbeantwortete Frage: setzt das voraus, dass ich bei der px Angabe im html vorab ausgerechnet habe, wie groß in px meine CSS-Scalierung in Y% ausfällt? Oder spielt das keine Rolle, wenn ja, warum?

[Matthias Apsel]

Hallo michaah,

Die unbeantwortete Frage: setzt das voraus, dass ich bei der px Angabe im html vorab ausgerechnet habe, wie groß in px meine CSS-Scalierung in Y% ausfällt?

Nein.

Oder spielt das keine Rolle, wenn ja, warum?

Darum kümmert sich der Browser.

Bis demnächst
Matthias

[Gunnar Bittersmann]

@@Matthias Apsel

Damit der Seitenaufbau ohne hin- und herspringende Inhalte erfolgen kann, auch wenn die Bilder noch nicht geladen wurden.

Ich habe aber die Seite etwas umstrukturiert, wird es so klarer?

Es sollte noch klar gemacht werden, dass dies auch bei RWD gilt: (manche) Browser verwenden die width- und height-Angaben im HTML, um den Platz im entsprechenden Seitenverhältnis freizuhalten, auch wenn das Bild mit CSS skaliert wird.

Und im Quelltext des Beispiels im Abschnitt RWD die width- und height-Attribute ergänzen.

😷 LLAP