宽度取决于高度

Question

你能告诉我完成的html代码，它是一些矩形在它与“我的屏幕的宽度”和“宽度=4/3的高度”。所以，它应该是3:4的reс纠缠，其中高度取决于我的屏幕高度，但宽度不取决于我的屏幕宽度。仅限于屏幕高度。

我以为我理解了以前的时间，但事实并非如此。

我有这个：

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript" src="colorbox/jquery.colorbox.js"></script>
<script type="text/javascript">
    $(document).ready(function(){ 
        $(".example7").colorbox({width:"80%", height:"80%", iframe:true});
    });
</script> 

我不知道怎么处理宽度。

Answer 1

你需要用JavaScript来计算宽度，这是不可能的。

相关的属性是window.innerHeight；将其乘以(3/4)得到高度，由于(3/4)*(4/3) == 1，window.innerHeight (顺便说一下)等于您希望的宽度。

然后设置元素的.height和.width属性。

注意:我假设你希望有一个与浏览器窗口成比例的矩形，而不是用户的屏幕。如果你真的想要屏幕尺寸，可以使用window.screen.height，而不是window.innerHeight；但要注意:随着宽屏和多显示器配置的增加，浏览器可能会报告出相当奇怪的尺寸。

Answer 2

HTML不规定这一点。CSS可以，但是CSS没有任何直接的内部数学逻辑。所以，你需要做的就是使用javascript。

当页面加载时，抓取对象的宽度，进行计算，然后设置高度。

如果您是JS新手，我建议您学习其中一个库，例如jQuery。在jQuery中，它看起来像这样：

$('#myDiv').width($(this).height()*.75);