<!DOCTYPE HTML PUBLIC "-//IETF//DTD HTML 2.0//EN">
<html>
<head>
<title>Bilder mit Größenangabe</title>
</head>
<body>
<p>
Bilder können in der Größe skaliert werden.
Vorsicht mit absoluten Pixelangaben für Bilder.
</p>
<p>
Das Original:<br>
<img
src="gifs/galgen.transparent.gif"
style="vertical-align: bottom">
</p>
<p>
mit 300x200 Punkten<br>
<img
src="gifs/galgen.transparent.gif"
style="vertical-align: bottom"
height="200"
width="300">
</p>
<p>
mit 500x20 Punkten<br>
<img
src="gifs/galgen.transparent.gif"
style="vertical-align: bottom"
height="20"
width="500">
</p>
<p>
mit 50x300 Punkten<br>
<img
src="gifs/galgen.transparent.gif"
style="vertical-align: bottom"
height="300"
width="50">
</p>
<p>
Bilder können mit CSS-Attributen flexibel gestaltet werden:<br>
Dieses Bild nimmt 10% der Breite der Seite ein, besitzt einen
Rand, eine eigene Hintergrundfarbe und
einen Innen- und Außenabstand:
<img
src="gifs/galgen.transparent.gif"
width="10%"
style="border: 0.5ex solid red;
padding: 1ex;
margin: 1ex;
background-color: #ff7777;"
>
</p>
<p>
eine bunte Linie,
erzeugt aus einem GIF-Bild mit 6x1 Punkten (55 bytes)
</p>
<p>
<img
src="gifs/rgbcmy.gif"
style="vertical-align: bottom"
height="5"
width="100%">
</p>
<p>
das gleiche Bild noch mal auf 200x200 skaliert
</p>
<p>
<center>
<img
src="gifs/rgbcmy.gif"
style="vertical-align: bottom"
height="200"
width="200">
</center>
</body>
</html>
