宽度取决于高度答案

【问题标题】：Width depends of height宽度取决于高度
【发布时间】：2010-04-15 23:34:19
【问题描述】：

你能告诉我完整的 html 代码，其中有一些矩形，“height=75% of my screen”和“widtht=4/3 of height”。所以，它应该是 3:4 reсtangle，高度取决于我的屏幕高度，但宽度不取决于我的屏幕宽度。仅屏幕高度。

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

我有这个：

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

而且我不知道如何处理宽度。

【问题讨论】：

You've asked similar question before? 如果您以某种方式丢失了问题和答案，您可以在您的个人资料页面中找回它们，您可以通过单击您的姓名以链接形式出现的任何地方（如 TRAVA）来访问，例如在顶部栏中:)
我以为我明白了，但事实并非如此（
您好！ “给我完整的代码”不太可能给你任何有意义的回应，这是一个“给我提示”网站，而不是“为我做我的工作”网站。
对不起。给我提示，用什么来代替“width =”以获得结果？ $(document).ready(function(){ $(".example7").colorbox({width:"80%", height:"80%", iframe:true}); });
@TRAVA：我会说类似width:screen.height,height:screen.height*0.75。

标签： javascript jquery html css

【解决方案1】：

您需要 JavaScript 来计算宽度，仅使用 HTML 是不可能的。

相关属性为window.innerHeight；将其乘以 (3/4) 得到高度，由于 (3/4)*(4/3) == 1，window.innerHeight （顺便）等于您想要的宽度。

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

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

【讨论】：

$(document).ready(function(){ $(".example7").colorbox({width:"80%", height:"80%", iframe:true}); });我正在输入“width=window.innerHeight”，但它不起作用。
@TRAVA：你应该传递一个对象 - 使用 {width:window.innerHeight,height: window.innerHeight*0.75} 可能工作。看起来您使用的是= 而不是:。

【解决方案2】：

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

当页面加载时，获取对象的宽度，进行数学运算，然后设置高度。

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

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

【讨论】：

是的，我知道。你能帮我把完成的脚本贴出来吗？
@TRAVA：你似乎在问这个：“我有所有的碎片和说明，你能帮我把它们放在一起吗？”不太可能有人会这样做；能不能自己试一试，具体遇到的问题汇报一下？
我有这个：我不知道如何处理宽度。
@Trava，看看我写的，然后和你的比较一下。