Ustaw wysokość div na połowę niezależnie od szerokości.

Question

Jak ustawić wysokość elementu div tak, aby była dokładnie równa połowie szerokości, gdy szerokość zmieni się w zależności od rozmiaru ekranu użytkownika?

Mam następujący zestaw na dz ...

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

Szerokość działa dobrze na to, że blokuje na 400 pikseli, jeśli ekran jest zbyt wąski, a także zatrzymuje się rozszerza na 1200 pikseli jeżeli dane ekran staje się zbyt duży. Ale chcę też, aby wysokość zmieniła się na dokładnie połowę szerokości w danym momencie. Coś jak ...

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

To nie zadziałało (czego tak naprawdę nie spodziewałem się).

Wolałbym używać CSS, jeśli jest to możliwe, ale chciałbym również, aby wysokość została zmieniona, jeśli użytkownik ręcznie dostosuje rozmiar okna internetowego (np. Co się dzieje z szerokością w danym momencie). Nie jestem pewien, czy jest to możliwe z CSS, ale jeśli jest sposób na to osiągnąć, Jquery chętnie skorzystam z tego.

jsFiddle of the above for reference.

Czy ktoś może mi pomóc?

Answer 1

Jeśli jesteś ok z wspieraniu tylko nowoczesnych przeglądarek, można to zrobić: http://jsfiddle.net/kNPfh/

Miarą vw jest w 1/100th szerokość rzutni, więc 50vw wynosi 50% szerokości ekranu.

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

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

jeśli nie, można użyć: http://jsfiddle.net/ff7WC/

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

Answer 2

Nie jest to możliwe w przypadku czystego CSS. Musisz użyć jQuery, aby wygenerować nowe rozmiary. Znalazłem to w: Using jQuery To Get Size of Viewport

Answer 3

Można to zrobić za pomocą dopełnienia na elemencie nadrzędnym, ponieważ względne wypełnienie (nawet wysokość-wysokość) jest oparte na szerokości elementu.

CSS:

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

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

Aby uzyskać szczegółowe informacje, zobacz ten artykuł na ten temat http://wemadeyoulook.at/how-we-think-about/proportional-scaling-responsive-boxes

Można również użyć jQuery za to, coś jak:

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

Proszę wybrać to jako poprawną odpowiedź, jeśli rozwiąże wątpliwości, klikając symbol zaznaczenia po lewej stronie.

Answer 4

Upewnij się, że plik js następnie użyć tego

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

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