CSS und JavaScript: Responsive DIVs in Breite und Höhe gleichzeitig anpassen
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!
Höhe und Breite eines DIV mit JavaScript verändern
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!
offsetWidth: Breite eines DIV mit JavaScript auslesen
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.
Höhe eines Elements mit JavaScript verändern
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>
- windows-beschleunigen (48x gelesen)
- datenschutz (47x gelesen)
- windows-mehr-geschwindigkeit (44x gelesen)
- windows-schneller-starten-autostart-aufraeumen (44x gelesen)
- pc-einsteigerkurs (32x gelesen)
Mehr Tipps zu CSS und JavaScript: Responsive DIVs ...
-
MS Excel / LibreOffice Calc: Zeilenbreite und Spalten-Höhe anpassen!
Schnelle Tipps für Excel und Co.: So bekommt man die Spalte länger für mehr Text oder die Spalte höher, damit nicht alles zu eng zusammensteht!...
-
iFrame Werte aus iFrame selber ändern: Größe, Höhe, Breite…
Ein iFrame ist ein viereckiger Bereich einer Webseite, der eine eigene HTML-Seite als Inhalt hat. Die kann von fremden Seiten kommen, wie zum Beispiel ein...
-
iPad 3: Materialkosten höher, Apple verdient weniger
Seit vergangenem Freitag ist das iPad 3 auf dem deutschen Markt erhältlich. Marktforscher iSuppli hat das neue iPad zerlegt und seine Materialkosten errechnet. Das Ergebnis:...
-
MS Excel / LibreOffice Calc: Zeilenbreite und Spalten-Höhe anpassen!
Schnelle Tipps für Excel und Co.: So bekommt man die Spalte länger für mehr Text oder die Spalte höher, damit nicht alles zu eng zusammensteht!...
-
iFrame Werte aus iFrame selber ändern: Größe, Höhe, Breite…
Ein iFrame ist ein viereckiger Bereich einer Webseite, der eine eigene HTML-Seite als Inhalt hat. Die kann von fremden Seiten kommen, wie zum Beispiel ein...
-
Webseiten-Titel ändern oder animieren mit JavaScript (mehr Aufmerksamkeit bei Tabs!)
Der Webseiten-Titel wurde früher in der Titelleiste des Browsers angezeigt: Mittlerweile sieht man den Text oft nur noch bei mehreren geöffneten Tabs. Für Besucher, die...
- Internetseite benutzt nur 8 cm von 38cm Breite des Bildschirms
- iphone 5 zeigt breite weiße Streifen an
- neue Grafikkarte zeigt nur breite bunte Streifen
- JavaScript Fehlermeldung
Also ich habe Windows7 Home Premium und den Firefox 19.Als ich ihn gestartet habe wollte der v...
- Betr.Javascript
Mein Computer-System:Windows 7 Firefox Installiertes Betriebssystem: 1 Hallo !Kann mir jemand ...
- Seitenzahlen mit Javascript
- HTML Formular und Javascript
Hallo, vllt. könnt ihr mir bei folgendem Problem helfen:Bei meiner Webseite soll die An...
CSS und JavaScript: Responsive DIVs in Breite und Höhe gleichzeitig anpassen