Juliiian97 Hallo, ich suche seit Wochen nach einer Lösung Div Bereiche mit Css je nach Fenstergröße zu skalieren. Ich möchte 4 Bereiche mit einem Bild haben. 2 Oben 2 Unten. jeder soll 1/4 des Bildschirms einnehmen außer oben 35 px abstand wegen der Leiste. In die Vier Bereiche soll ein Bild welches am besten immer scharf sein soll. Wenn ich das Fenster skaliere dann sollen sie alle 4 Bereiche mit skalieren.
Danke im Voraus
SucellusSucellus
Wochen nach der Lösung gesucht? Na, so schwer ist das doch nicht. Und das geht auch völlig ohne JS.
html, body { height: 100%; margin: 0; padding: 0; }
#wrapper {
margin-top: 35px;
width: 100%;
height: 100%;
}
#wrapper img {
float: left;
width: 49.9%;
height: 50%;
}
Falls du dich wegen den 49.9% wunderst - das ist wegen einem IE Bug. ;)
Whre0815Whre0815
Am besten ist meiner Meinung nach eine Lösung mit JavaScript (jQuery) und CSS. Und zwar sowas:
$(window).resize(function() {
var width = $(window).width();
if(width > 1440) {
$("html").addClass("widescreen");
} else {
$("html").addClass("normal");
}
});
Das prüft bei jeder Änderung der Größe des Browserfensters, ob die Breite 1440 über- bzw. unterschreitet und fügt dann je nach Breite "widescreen" oder "normal" als Klasse zum HTML-Element hinzu, also
<html class="widescreen">
Du kannst dann in der CSS-Datei je nach Fenstergröße die Eigenschaften verschieden deklarieren:
.widescreen body {
width:1100px;
}
.normal body {
width:900px;
}
Allerdings bräuchtest Du dann, um bei jeder Breite zu greifen, zu viele verschiedene Deklarationen. In Deinem Fall wäre eine Lösung mit Prozentangaben daher vielleicht besser geeignet, obwohl Prozentangaben sehr unschön zu handhaben sind, vor allem Deine 35px Abstand.
voodoo123voodoo123
das geht nur mit Prozentangaben, allerdings sind dann deine 35 px Abstand oben nicht mehr garantiert.
Diese Frage teilen