wake-up-neo.net

Stellen Sie die Höhe eines div auf die Hälfte der Breite ein

Wie kann ich die Höhe eines Div genau auf die Hälfte festlegen, unabhängig von der Breite, wenn sich die Breite abhängig von der Bildschirmgröße des Benutzers ändert?

Ich habe folgendes auf ein div gesetzt ...

#div1 {
    min-width:400px;
    width:100%;
    max-width:1200px;
    height:400px;
    background-color:red;  
}

Die Breite funktioniert einwandfrei, sie sperrt bei 400 Pixel, wenn der Bildschirm zu schmal wird, und stoppt bei 1200 Pixel, wenn der Bildschirm zu groß wird. Ich möchte aber auch, dass sich die Höhe genau um die Hälfte der Breite ändert. So etwas wie...

#div1 {
    min-width:400px;
    width:100%;
    max-width:1200px;
    height:width/2;
    background-color:red;  
}

Das hat nicht funktioniert (was ich eigentlich nicht erwartet hatte).

Ich würde es vorziehen, CSS zu verwenden, wenn dies möglich ist, aber ich möchte auch, dass sich die Höhe ändert, wenn der Benutzer die Größe des Internetfensters auch manuell anpasst (wie dies beispielsweise mit der Breite geschieht). Ich bin nicht sicher, ob dies mit CSS möglich ist. Wenn es jedoch einen Weg gibt, dies mit Jquery zu erreichen, würde ich das auch gerne verwenden.

jsFiddle der obigen Angaben als Referenz.

Kann mir jemand helfen?

14
Flickdraw

Wenn Sie nur moderne Browser unterstützen, können Sie Folgendes tun: http://jsfiddle.net/kNPfh/

Das vw-Maß ist in 1/100 der Breite des Darstellungsbereichs, 50vw entspricht 50% der Bildschirmbreite.

<div class='halfwidth'></div>

.halfwidth {
    width: 100%;
    height: 50vw;
    background-color: #e0e0e0;
}

wenn nicht, können Sie Folgendes verwenden: http://jsfiddle.net/ff7WC/

$(window).on( 'resize', function () {
    $('.halfwidth').height( $(this).width() / 2 );
}).resize();
24
Dom Day

Stellen Sie sicher, dass Sie eine js-Datei haben, und verwenden Sie diese

$(window).load(function(){
    $('.element').height($('.element').width() / 2);
    $(window).resize(function(){
        $('.element').height($('.element').width() / 2);
    });
});

http://jsfiddle.net/Hive7/8CNtU/2/

3
user2568107

Sie können dies mit Hilfe der Auffüllung eines übergeordneten Elements tun, da die relative Auffüllung (auch in Bezug auf die Höhe) auf der Breite des Elements basiert.

CSS:

.imageContainer {
    position: relative;
    width: 25%;
    padding-bottom: 25%;
    float: left;
    height: 0;
}

img {
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0;
}

Weitere Informationen finden Sie in diesem Artikel zum Thema http://wemadeyoulook.at/how-we-think-about/proportional-scaling-responsive-boxes

Sie können auch Jquery verwenden, etwa:

$('.ss').css('height',width()/2);

Bitte wählen Sie dies als richtige Antwort, wenn Sie Ihre Zweifel lösen, indem Sie auf das Häkchen-Symbol links klicken.

2
damien hawks

Dies ist mit reinem CSS nicht möglich. Sie müssen jQuery verwenden, um die neuen Größen zu generieren. Ich habe dies in SO gefunden: Verwendung von jQuery, um die Größe des Viewports zu ermitteln

0
Michael Walter