16

当宽度会根据用户的屏幕尺寸而变化时,如何将 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实现这一点,我也很乐意使用它。

上面的jsFiddle供参考。

谁能帮我?

4

3 回答 3

30

如果您可以只支持现代浏览器,您可以这样做: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();
于 2013-07-16T08:59:30.567 回答
3

确保你有一个 js 文件然后使用它

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

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

于 2013-07-16T09:07:29.327 回答
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);

如果通过单击左侧的勾号解决了您的疑问,请选择此作为正确答案。

于 2013-07-16T08:53:52.553 回答