CSS Höhe als format ausdrücken

wolf

Guten Abend,
kennt jemand von euch ne möglichkiet Die Höhe eines Elementes sozusagen auf auto zu stellen, wobei auto ein bestimmtes Breiten/Höhenverhältniss berücksichtigt so like that:

CSS

div{
    width: 33.3%;
    height: auto 16:9;
}

Oder kann mir jemand ne rechnerische starthilfe geben ums duch JQ umzusetzen

Edit:
So wie man das bei bildern im css kennt (Feste Breite - dynamische Höhe )

cottton

Geht da nicht was mit calc?
Habs nie angewandt, aber wenn Du die wifth berechnen lässt, dann kannst Du ja sicherlich auch das Verhältnis für die height aus-calc-en lassen.
edit: also alles in % dann, natürlich.

wolf

Okay, mit calc geht viel! aber der grundrechenweg um aus ner festen Breite und einem faktor nen wert zu errehenn .. den weis ich net :p

EDIT:
Wartet
Um ein 16:9 format zu erreichen muss ich breite an 2 Teilen oder? XD

Und @cotton man bruacht JS weil calc keine horizontalen % werte in einer vertikalen rechnung verwendnen kann
Somit brauche ich JS um den Px Wert aktuell zu bekommen ..

cottton

Naja, Du willst doch die width auf x setzen.
Und die height soll ja sich ja nun zu width x im Verhältnis y verhalten.

CSS

div{
    background:red;
    position:absolute;
    width:calc(100%/2); /*vorgabe*/
    height:calc( 
        ( 
            (100%/2) /*vorgabe*/ 
            /16 /*teile*/
        ) *9 /*teile*/
    );
}

Alles anzeigen

Aber - ich hab da nen Denkfehler glaub ich.
aber so in der Richtung muss es möglich sein. Musst nur rausfinden, wie Du das Format (die Anteile) verteilst.
Siehe: http://de.wikipedia.org/wiki/Seitenverh%C3%A4ltnis
=)

EDIT: hate nen grundlegenden Denkfehler: % (was immer da raus kommt) sind ja die Anteile des Benutzerbildschirms. Also so nicht zu verwenden.
Man müsste erstmal herausfinden:
- ist momentaner screen Hochformat, oder Querformat?
- erstelle Quadrat mit max möglicher Größe
- näder nun dieses max mögliche Quadrat in format (zB) 16:9 um

wolf

Aber 100% HÖHE ist was anderes als 100% BREITE nh?

Habs so gelöst, der faktor ist noch net so klar

JavaScript

//Bei größen veränderungen
$( window ).resize(function() {
    //Höhe neu berechnen
    createFormatHeight();
});
function createFormatHeight(){
    $.each( $('.elemClass') ,function(){
        var breite = $(this).width();
        var hoehe = breite/1.78;
        $(this).css('height',hoehe);
    });
}

Alles anzeigen

cottton

Mach mal n jsfiddle bidde

edit: btw:

Zitat

Format 16:9 (= 1,78:1)

also breite/1.78 ?

wolf

http://jsfiddle.net/j62hn3md/2/

Und gute nacht, werd mich morgen weiter damit beschäftigen

cottton

nice.
hab in der zwZeit hier ne css Lösung gefunden:
http://stackoverflow.com/questions/1527…ing-a-169-ratio
deren jsfiddle: http://jsfiddle.net/5CMYw/3/

keine ahnung wie - aber scheint zu funktionieren.

wolf

Not Bad, aber das mit dem Padding.. naja solang man in der Box nix vorhat xD

cottton

Deine js Lösung scheint mir sinnvoller =)
Und via css only wird das wohl nicht funzen.

lauras

Das geht durchaus, man muss nur wissen wo man suchen muss
http://jsfiddle.net/sc7gpqdv/

Browser-Support für vw ist bis auf Opera Mini und IE8 gegeben, von daher da keine Probleme.

wolf

Göttlich
http://jsfiddle.net/sc7gpqdv/1/

cottton

Hammer! Gleich ab in die Lesezeichen =)
tnx!

Jetzt mitmachen!