(Durchschnitt: 0,00 von
5 –
0
Stimme(n)) - Fehler: Nicht angemeldet!
Loading...
Für Responsive-Webseiten, die nicht nur in großer Auflösung auf dem Desktop-Rechner, sondern auch auf dem Tablet oder Handy gut aussehen, muss man oft bestimmte Elemente in der Größe an das Webseiten-Fenster (oder die verfügbare Bildschirmbreite) anpassen. Das geht mit CSS sehr leicht: Hier zeigen wir zum Beispiel, wie man mit CSS ein Bild immer automatisch mitskaliert).
Zum Beispiel: So sieht es aus!
Das richtet sich allerdings immer nur nach der Breite des Objektes und des Bildschirms, nicht nach der Höhe: Um auch die Höhe automatisch mit anzupassen, kann man sich aber mit Javascript behelfen!
Um CSS Eigenschaften eines Elements mit Javascript verändern zu können, kann man direkt auf dessen style-Angaben zugreifen: Zum Setzen von Höhe und Breite geht das zum Beispiel so:
document.getElementById("element").style.width = breite+'px';
document.getElementById("element").style.height = hoehe+'px';
Wichtig ist allerdings, dass am Ende noch “+’px'” angehängt wird: CSS Breitenangaben müssen (wenn nicht “0”), immer die Einheit dahinter stehen haben – auch wenn man den CSS Wert mit JavaScript ändert: Dies ist ein häufiger Fehler, wenn das Setzen eines neuen Wertes nicht funktioniert!
Ändert sich die Breite des Elements jetzt automatisch, da sie auf 100% gesetzt ist, muss man entweder beim Laden oder beim Vergrößern/Verkleinern des Fensters die Breite des Elements auslesen und dazu die passende Höhe berechnen: Diese kann man dann mit Javascript wieder an das Element senden, damit es sich direkt mit anpasst!
Um die Größe mit der Breite zusammen anpassen zu können, liest man zunächst die Breite des Elements aus, dass in der Höhe angepasst werden soll. Das geht aber nicht mit dem Wert “width”, stattdessen braucht man den Wert “offsetWidth”:
var breite = document.getElementById("element").offsetWidth;
Anschließend berechnet man die Höhe, die das neue Objekt haben soll. In unserem Beispiel soll das Element quadratisch sein, die Höhe ist also genauso groß wie die Breite – sollte die Höhe abweichen, muss man sie zunächst im passenden Verhältnis ausrechnen. Bei einem DIV, dass doppelt so breit wie hoch sein soll, wäre die Höhe also:
var hoehe = Math.round(breite / 2);
Durch “Math.round()” wird der Wert automatisch mathematisch auf die nächste ganze Zahl auf- oder abgerundet.
In unserem Beispiel setzen wir die Höhe einfach genauso groß wie die Breite, das geht dann mit diesem Code:
document.getElementById("element").style.height = breite+'px';
Hat man vorher eine andere Höhe ausgerechnet und in der Variablen “hoehe” gespeichert, würde der Code so aussehen:
document.getElementById("element").style.height = hoehe+'px';
Selber ausprobieren: So sieht es aus!
In dem Beispiel werden drei DIV Elemente mit einem sich automatisch anpassenden Hintergrundbild nebeneinander positioniert, jedes hat eine Breite von 33,33% und eine Höhe von einem Pixel. Beim Laden der Seite (onload) wird die Höhe abhängig von der Breite berechnet und direkt geändert – ebenso bei jedem Vergrößern oder Verkleinern des Browserfensters (onresize).
Der gesamte Code für die Seite mit den drei DIV-Elementen sieht aus wie folgt – der Code für nur ein sich anpassendes Element mit kompletter Breite folgt weiter unten:
<html>
<style type="text/css">
.btbutton {
position:relative;
width:33.33%;
height:1px;
float:left;
}
.bteins {
background:url('css-resize-1.jpg');
background-size:cover;
background-repeat: no-repeat;
background-position:50% 50%;
}
.btzwei {
background:url('css-resize-2.jpg');
background-size:cover;
background-repeat: no-repeat;
background-position:50% 50%;
}
.btdrei {
background:url('css-resize-3.jpg');
background-size:cover;
background-repeat: no-repeat;
background-position:50% 50%;
}
</style>
<body onload="resizer()" onresize="resizer()"
style="width:100%;padding:0;margin:0;">
<div id="eins" class="btbutton bteins"></div>
<div id="zwei" class="btbutton btzwei"></div>
<div id="drei" class="btbutton btdrei"></div>
<div id="clear" style="clear:both"></div>
<script type="text/javascript">
function resizer() {
eins = document.getElementById('eins');
zwei = document.getElementById('zwei');
drei = document.getElementById('drei');
var breite = document.getElementById("eins").offsetWidth;
var hoehe = breite;
eins.style.height = hoehe+'px';
zwei.style.height = hoehe+'px';
drei.style.height = hoehe+'px';
}
</script>
</body>
</html>
Kurzform mit nur einem anzupassenden Element
Möchte man stattdessen nur ein DIV Element automatisch anpassen, kann man das Skript entsprechend abkürzen und muss die Breite von 33,33% auf 100% ändern. In diesem Beispiel soll das Element dann aber doppelt so breit wie hoch sein, die Höhe ist also immer die Hälfte der Breite. Die Kurz-Form mit nur einem Element und ohne Text sieht dann so aus:
<html>
<style type="text/css">
.btbutton {
position:relative;
width:100%;
height:1px;
background:url('css-resize-1.jpg');
background-size:cover;
background-repeat:
no-repeat;
background-position:50% 50%;
}
</style>
<body onload="resizer()" onresize="resizer()"
style="width:100%;border:0;padding:0;margin:0;">
<div id="eins" class="btbutton"></div>
<script type="text/javascript">
function resizer() {
eins = document.getElementById('eins');
var breite = document.getElementById("eins").offsetWidth;
var hoehe = Math.round(breite / 2);
eins.style.height = hoehe+'px';
}
</script>
</body>
</html>
Also ich habe Windows7 Home Premium und den Firefox 19.Als ich ihn gestartet habe wollte der v...
Mein Computer-System:Windows 7 Firefox Installiertes Betriebssystem: 1 Hallo !Kann mir jemand ...
Hallo, vllt. könnt ihr mir bei folgendem Problem helfen:Bei meiner Webseite soll die An...