Question

当宽度根据用户的屏幕尺寸改变时，如何将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 of the above for reference.

任何人都可以帮助我吗？

Answer 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();

Answer 2

确保您有一个js文件，然后使用此

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

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

Answer 3

您可以在父项的填充帮助下执行此操作，因为相对填充（即使是高度方式）也基于元素的宽度。

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);

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

Answer 4

纯CSS无法实现这一点。你必须使用jQuery来创建新的大小。我在SO Using jQuery To Get Size of Viewport

中发现了这一点

将div的高度设置为宽度的一半

4 个答案: