CSS - Automatisch skalierendes Bild
In der Regel werden Bilder vom Browser in der Originalgröße dargestellt. Dies gilt auch dann, wenn das Browserfenster kleiner als das Bild ist.
Soll dieser unschöne Effekt verhindert werden, setzt man einfach eine CSS-Klasse ein. Dabei wird das Bild in einem DIC-Container abgelegt, der über eine Klasse auf eine bestimmte prozentuale Breite der verfügbaren Seitengröße festgelegt wird.
Das Bild im DIV erhält per CSS die Breite von 100%. Es fügt sich dadurch der variablen Breite des DIVs an und wird kleiner, wenn das Browserfenster in der Größe verringert wird.
Man muss lediglich darauf achten, dass die Bilder in einer ausreichenden Größe auf dem Server gespeichert sind, da es sonst zu Verzerrungen kommt, wenn der Besucher der Internetseite mit einer hohen Bildschirmauflösung arbeitet.
HTML
<div class=variablegroesse><img src=/bildname.jpg></div>
CSS
div.variablegroesse
{width: 33%;}
div.variablegroesse img
{width: 100%;}