Установите высоту div как половину того, что ширина

Как установить высоту div как половину ширины, когда ширина будет меняться в зависимости от размера экрана пользователя?

У меня есть следующий набор в div...

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

Ширина отлично работает на этом, она блокируется на 400 пикселей, если экран становится слишком узким, и он также перестает расширяться на 1200 пикселей, если экран становится слишком большим. Но я также хочу, чтобы высота изменилась на половину того, что ширина в любой момент времени. Что-то вроде...

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

Это не сработало (чего я на самом деле не ожидал).

Я бы предпочел использовать CSS, если это возможно, но так же, как мне хотелось бы изменить высоту, если пользователь вручную изменит размер окна Интернета (например, что происходит с шириной на данный момент). Я не уверен, что это возможно с CSS, однако, если есть способ достичь этого JQuery, я был бы рад также использовать это.

jsПримечание выше для справки.

Кто-нибудь может мне помочь?

Ответы

Ответ 1

Если вы в порядке с поддержкой только современных браузеров, вы можете сделать это: http://jsfiddle.net/kNPfh/

Величина vw находится в 1/100-й ширины окна просмотра, поэтому 50vw составляет 50% ширины экрана.

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

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

Если нет, вы можете использовать: http://jsfiddle.net/ff7WC/

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

Ответ 2

Вы можете сделать это с помощью дополнения к родительскому элементу, поскольку относительное заполнение (даже по высоте) основано на ширине элемента.

CSS

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

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

Подробнее см. в этой статье на эту тему http://wemadeyoulook.at/how-we-think-about/proportional-scaling-responsive-boxes

Вы также можете использовать jquery для этого, например:

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

Пожалуйста, выберите это как правильный ответ, если он разрешит ваши сомнения, нажав на значок галочки слева.

Ответ 3

Убедитесь, что у вас есть файл js, затем используйте

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

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