• Das Erstellen neuer Accounts wurde ausgesetzt. Bei berechtigtem Interesse bitte Kontaktaufnahme über die üblichen Wege. Beste Grüße der Admin

Div proportional skalieren

Type-Style

Type-Style

New member
Moin moin,

kann man ein Div so anlegen das es sich bei Änderung der Fenstergröße proportional skaliert?

Ich weiß es geht mit Bildern und irgendwie auch mit Tabellen.
Im Grunde kenne ich mich sehr gut damit aus, und such jetzt hier nur Bestätitung dafür.
Also bitte keine Beiträge über em statt px, das mach ich sowieso schon.

Nun noch mal einfach formuliert.
Ein Div Container ist Quadratisch auf der Seite, sollte sich das Fenster nun verkleinern soll der Container auch kleiner werden aber quadratisch bleiben.
 
Danke, stimmt.
Aber das löst das Problem leider nicht.
Denn im Grunde müsste sich ja die Höhe ändern wenn die Breite schmaler wird.
 
Soweit ich das weiß, kann man die Proportionen nicht mit CSS erhalten - dafür brauchst du dann JS.
 
Type-Style schrieb:
Tut mir Leid aber ich denke nicht.
Oder mir entgeht etwas denn wenn Ich der Box width:50% height:50%
gebe ist Sie ja nicht mehr quadratisch. Sie ist zwar flüssig aber wer kommt schon mit einem Fenster das perfekt quadratisch ist.
Zum Vergrößern anklicken....
Naja, wenn du beide Werte angibst, dann verstellst du auch die Proportionen des Bildes. Du musst dich entscheiden nach welcher Relation sich dein Bild skalieren soll. Nach der Höhe oder der Breite.
 
ein schlauer schrieb:
Naja, wenn du beide Werte angibst, dann verstellst du auch die Proportionen des Bildes.
Zum Vergrößern anklicken....
Da haben wir es.
Genau das ist das Problem. Es geht bei Bildern! Aber ich hätte den selben Effekt gerne bei einer Div Box.

kkapsner schrieb:
Soweit ich das weiß, kann man die Proportionen nicht mit CSS erhalten - dafür brauchst du dann JS.
Zum Vergrößern anklicken....
Danke davon bin ich auch ausgegangen.
Ich mir jetzt eine function gebaut die bei onResize the Breite und die Höhe auf ein und den selben Wert setzt.
 
[strike]Da ist es das gleiche Prinzip. Damit du Proportionen erreichst, musst es natürlich eine Bezugsgröße geben, die fest ist und eine die Ralativ ist, da wirst du nicht drumherum kommen, egal wie du das jetzt löst.[/strike]

Tut mir leid, ich hab deine Frage nicht genau genug gelesen. Du hast recht, so geht es nicht.
 
Zuletzt bearbeitet:
Hi,

Lösungsvorschlag:
1. Überprüfen ob das Fenster höher als breit ist.
2. ggf Breite/Höhe auslesen und in den andern Wert reinschreiben.

HTML: 
<div id="id"></div>
<script type="text/javascript">
if (window.innerHeight > window.innerWidth) {
document.getElementById("id").style.height = document.getElementById("id").style.width;
} else if (window.innerHeight < window.innerWidth) {
document.getElementById("id").style.width = document.getElementById("id").style.height;
} else {
//Wenn beide gleich sind, passiert nichts.
}
</script>
 
Hallo,
Es geht auch ohne Javascript. Allerdings ist dann ein leeres img erforderlich, was ja nicht sein sollte. Aber Ausnahmen sind wohl erlaubt.
Hier das Beispiel http://www.gipspferd.de/div.htm
Wolltest Du es überhaupt so ????
mfg
henry

Achso, die Grafik ist 1000 x 1000 Pixel groß und für dieses Beispiel Halbtransparent.

Hier noch der gesamte Code

Code: 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="de" xml:lang="de">

<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Div prorotional anpassen</title>
 <style type="text/css">

 
.proportional {
  margin:0;
  padding:0;
  position:relative;
  width:33%;
  border:1px solid #000;
  overflow:auto;
 }
 .proportional p {
  position:absolute;
  left:10px;
  top:10px;
  font-size: 75%;
}   
.proportional img { /*Proportionale Grafik 1000 x 1000 Pixel heir mal Halbtransparent Volltransparent ist besser  */
 width:100%;
 display:block;
} 
   
</style>
</head>

<body>

<div id="top"><h1>Div prorotional anpassen</h1></div>

 <div class="proportional">
 <img src="div.png"/>
 <p>
 Überall dieselbe alte Leier. Das Layout ist fertig, 
 </p>
 </div> 

</body>
</html>
 
Zuletzt bearbeitet:
Ich verstehe im moment dein einwand nicht ganz, aber ein quadrat war gefordert. in diesem fall sind es 33% vom browserfenster. egal welche auflösung.
ODER HABE ICH ETWAS FALSCH VERSTANDEN ?

mfg
henry
 
Hatte das Problem so verstanden, dass es sich auch nach der Höhe skalieren soll - also was hald gerade den kleineren Wert liefert.
 
Also bei mir ist die Höhe egal, es ist immer 50% von der Breite und (ungefähr) quadratisch.
Dachte, dass du dich auch nach der Fensterhöhe richten wolltest.
 
Nein, mit height:50% geht es nicht. Aber wie du es bemerkt hast ist das div immer (fast) quadratisch.
Jetzt mal im ernst. Wozu braucht man ein ,sich am Browserfenster anpassbaren, Container der immer quadratisch sein soll ? Je nach Größe muss irgendwann gescrollt werden und es ist dann nicht mehr zu erkennen, dass es sich um ein Quadrat handelt. Oder ?:p
Hier nochmal das Beispiel mit width:20% http://www.gipspferd.de/div.htm

Weil es ein absolutes NOGO ist HTML Element für Layoutzwecke zu verwenden, ist dieses Beispiel nicht unbedingt erstrebenswert. Damit sollte das Thema hier beendet werden.
Der Fragesteller wird schon wissen, warum sein Div quadratisch sein soll oder muss.

mfg
henry
 
Du musst dich einloggen oder registrieren, um hier zu antworten.
Zurück
Oben