Bilder automatisch skalieren [IE|M|O|G]

von: Werner Zenk

Dieses JavaScript skaliert automatisch die Größe eines Bildes
(Zoom-Effekt) bei einer Änderung der Fenstergröße.

JavaScript | 681 Bytes | 38 Zeilen | 16.04.2011

Quelltext: „Bilder automatisch skalieren”


<script type="text/javascript">
var aktuelleBreite = 1024;

function liveResize() {
 if (imFenster())
  return;
  var was = document.getElementById('dasbild');
  if (was.width!=aktuelleBreite) {
   was.width=Breite();
 }
}

function setzeBildBreite() {
 if (imFenster())
  return;
  document.getElementById('dasbild').width=Breite();
}

function imFenster() {
 if (aktuelleBreite<Breite()) {
  return true;
 }
 return false;
}

function Breite() {
 window.innerWidth-100;
 return document.body.offsetWidth-100;
}

onresize=liveResize;
</script>

<div style="text-align: center;">
 <img id="dasbild" src="bild.jpg">
</div>

<script type="text/javascript">setzeBildBreite();</script>

Und Ihre Meinung? Sie vermissen auf dieser Seite wichtige Informationen oder haben Hinweise für uns?

Hilfe finden Sie im » netzgemein.de - Forum. Auch als „Gast” können Sie dort Fragen stellen!

Das könnte Sie interessieren:

Bildschirmgröße - Öffnet ein neues Fenster mit der größe Ihres Bildschirmes.

Objekte Anzeigen / Verstecken - Buttons, Texte, Bilder etc. können auf Klick angezeigt oder versteckt werden.

Confirm - (Ein Geschenk :-)

Ausgabe des aktuellen Datums - Dieses JS schreibt das aktuelle Datum auf eine Seite.

JavaScript Bausteine 4

Cookie-Kurs

Auswahlliste-Menüs

Hintergrund - Hintergrundfarbe, Textfarbe, Hintergrundbild mit JavaScript ändern.

Doppelte Menü-Auswahlliste (mehrfach Auswahlliste) - Dieses Auswahlliste-Menü ändert nach dem auswählen einer Option, den Inhalt der zweiten Auswahlliste.

Minirechner - Der warscheinlich kleinste Rechner der Welt ;-)

Sekundenzähler - Das Script schreibt jede Sekunde eine Zahl in das Textfeld. …mehr