Möglichkeiten Bilder an die Auflösung des Monitors anzupassen

Bilder mit flexibler Größe

Auf dem Adams Peak (Sri Lanka)

Eine Skalierung des Bildes wird erreicht durch eine Stylesheet-Anweisung. <img style="width: 100%; max-width: 600px" src="img/bild.jpg" / >

In diesem Beispiel, ist die maximale Auflösung 600px.
Eine weitere gestalterische Möglichkeit sieht man auf der linken Seite.

Das Bild passt sich an die Größe des Browserfenster und an die Auflösung des Monitors an.
Damit können Bilder flexibel gestaltet werden.

CSS-Anweisung:

.bildzoom {/* Bilder an div anpassen */
           float: left;
           width: 40%;
           border: thin silver solid;
           margin: 0.5em;
           padding: 0.5em;
           max-width: 300px; /* maximale Bildgröße festlegen */
 }

.bildzoom p {
            text-align: center;
            font-style: italic;
 }
 img.skaliert {
            width: 100%;
	}

Html-Anweisung:

<div class="bildzoom">
<img class="scaled" style="margin-top: 0em;"
src="dateipfad/bild.jpg" 
alt="Auf dem Adams Peak in Sri Lanka" />
<p>Auf dem Adams Peak(Sri Lanka)</p>
</div>

Ein Hintergrundbild für den Body (ohne Html5, CSS3 und Javascript)

Funktioniert auch im IE7 und älteren Browsern. Die Proportionen bleiben erhalten.
Mit einem Hintergrundbild lassen sich schnell anspruchsvolle Webseiten gestalten.
Bei einem Breitbildmonitor wird das Bild nach unten verkürzt dargestellt.

Fullscreen Beispiel:

Das Bild zoomt sich auf die Größe (Auflösung) des Monitors.
Es hat eine Auflösung von 1600 x 1067px und eine Dateigröße von 87Kb.
Die Webseite hat eine kurze Ladezeit.

CSS-Anweisung:

img.hintergrund { display: block; z-index:-20;
   	   min-height: 100%;
	   min-width: 1024px;
	   width: 100%;
	   height: auto;
   	   position: fixed;
	   top: 0;
	   left: 0;
	}

Gleich hinter dem öffnenden body-Tag die
Html-Anweisung:

<body>
<p><img class="hintergrund" src="images/hintergrund.jpg"
alt="hintergrundbild"/></p>

Fragen beantwortet & Tipps zum Webdesign

Wichtig !!

Die Serversoftware Mowes Portable von der Firma CH Software hat die Geschäftstätigkeit zum 7. November 2012 eingestellt.
Ein gleichwertiges Programm ist: EasyPhp