Forum
Tipps
News
Frage stellen
search
Menu-Icon
search

CSS und JavaScript: Responsive DIVs in Breite und Höhe gleichzeitig anpassen


  1. Computerhilfen
    2. ›
  2. Info
    3. ›
  3. Webmaster

danke
Bewerten
1 Stern2 Sterne3 Sterne4 Sterne5 Sterne (Durchschnitt: 0,00 von 5 – 0 Stimme(n)) - Fehler: Nicht angemeldet!
Loading...

Beispiel: Responsive Webseiten - Höhe und Breite mit Javascript ändern

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>


Fragen zu diesem Tipp? In unserem Webmaster-Forum helfen wir weiter!






» Top Tipps: Diese Tipps sind heute beliebt
Passende Wörter im Lexikon:
Javascript
JavaScript ist eine weit verbreitete Skriptsprache, die ursprünglich von Netscape für das DOM-Scripting für Webseiten entwickelt wurde. Sie hat sich seitde...

CSS
CSS ist die Abkürzung für Cascading Style Sheets, eine Beschreibungssprache im Internets, die für die visuelle Gestaltung von Webseiten verantwortlich ist....



Mehr Tipps zu CSS und JavaScript: Responsive DIVs ...


Ähnliche Fragen:
© Computerhilfen.de (12768x gelesen)
CSS und JavaScript: Responsive DIVs in Breite und Höhe gleichzeitig anpassen