Images

Images etc.

Verändern Sie die Breite des Browserfensters, am besten in der Geräteemulation.

Inhalt

HTML-img-Element — png- und svg-Datei in Originalgröße

smiley.png wird ohne Größenangabe geladen, d. h. in der Originagröße 32 px × 32 px.

smiley.svg wird ohne Größenangabe geladen, d. h. in der Originagröße 800 px × 800 px.

HTML-img-Element — png- und svg-Datei in veränderter Größe (proportional)

Achten Sie auf die Wiedergabequalität!

Nutzen Sie die HTML-Attribute width und height zukünftig nicht mehr!

smiley.png wird mit dem HTML-Attribut height="200" geladen, d. h. in der Größe 200 px × 200px.

smiley.svg wird mit dem HTML-Attribut width="50%" geladen, d. h. ausgedehnt auf 50 Prozent der verfügbaren Bildschirmbreite!

HTML-img-Element — png- und svg-Datei in veränderter Größe (nicht proportional)

Achten Sie auf die Wiedergabequalität!

smiley.png wird mit den HTML-Attributen width="200" und height="100" geladen, d. h. in der Größe 200 px × 100 px.

smiley.svg wird mit den HTML-Attributen width="200" und height="100" geladen, d. h. in der Größe 200 px × 100 px.

Welche Größe wird wirklich geändert?

HTML-figure-Element — png-Datei in ursprünglicher Größe (32 px × 32 px)

Das figure-Element enthält einen img- und einen figcaption-Tag.

HTML-figure-Element — png-Datei in veränderter Größe (proportional)

Achten Sie auf die Wiedergabequalität!

Das figure-Element enthält einen img- und einen figcaption-Tag.

smiley.png wird mit dem HTML-Attribut width="100%" geladen, d. h. ausgedehnt auf 100 Prozent der verfügbaren Bildschirmbreite!.

HTML-figure-Element — png-Datei in veränderter, abhängiger Größe (proportional)

Achten Sie auf die Wiedergabequalität!

Das figure-Element enthält einen img- und einen figcaption-Tag.

smiley.png wird mit dem HTML-Attribut width="100%" geladen, d. h. ausgedehnt auf 100 Prozent der vom details-Tag zur Verfügung gestellten Breite !.

HTML-picture-Element — png-Datei in veränderter, abhängiger Größe