Proportionale Größenangaben für Images
Ganz 'sauber' ist dieser Tipp nicht unbedingt. Aber da ich diesen Kiff mehr oder weniger zufällig herausgefunden habe, möchte ich ihn doch weiter geben. Warum sollen sie davon nicht erfahren?
Dieses Image wird normalerweise mit diesem Befehl eingebunden:
<img src="32.gif" width="32" height="30" border="0" alt="">
Wollen Sie es aber in vierfacher Größe anzeigen, ändern sie beide Größenangaben proportional.
Das Bild wird nicht mit den wirklichen, sondern mit falschen Größenangaben in die HTML-Seite eingebunden.
Da heist es natürlich rechnen (Dreisatz) .
<img src="32.gif" width="128" height="120" ... >
Hilfreicher Trick
(Ergebnis nächtlicher Experimente)
Tragen sie lediglich eine der beiden gewünschten Größen ein, die zweite wird vom Browser anhand der Bildproportionen errechnet!
Die Rechenarbeit können Sie sich sparen!
Lassen Sie einfach eine Größenangabe weg.
<img src="32.gif" width="128" border="1" alt="">
2. Beispiel
Neben dem tollen Effekt der (gewollten) Bildrasterung, wird das Image ganz universell z.B. an die Größe einer Navigationsleiste angepaßt. Zunächst den originalen IMG-Code:
<img src="0-fade.gif" width="5" height="8" border="0" alt="">
Das originale Image: (Größe 5 x 8 Pixel)
Und das von 5 auf 75 Pixel Breite gesteckte Image:
Die Höhenangabe fehlt in der Notierung des nächsten IMG-Tags. Sie könnten natürlich auch rechnen und für die Höhe 120 eintragen. Wie sie feststellen, funktioniert das aber auch ohne diesen Eintrag und der Browser nimmt ihnen die Arbeit ab.
<img src="0-fade.gif" with="75" border="0" alt="">
|