我正在使用 Bootstrap 的网格系统,并将<iframe>
宽度设置为 90%。
问题是如何设置高度<iframe>
?例如,我想要 16:9 的尺寸。但我不知道如何获得宽度的值
代码可能如下所示:
iframe
width: 90%
height: $(width)*9/16
我正在使用 Bootstrap 的网格系统,并将<iframe>
宽度设置为 90%。
问题是如何设置高度<iframe>
?例如,我想要 16:9 的尺寸。但我不知道如何获得宽度的值
代码可能如下所示:
iframe
width: 90%
height: $(width)*9/16
伙计,那家伙打败了我,但他是对的,你可以用 JQuery 做到这一点
$(document).ready(function() {
$('iframe').height(function() {
return $(this).width()*(9/16);
});
});
这可以用纯 CSS 来完成,它被称为内在比率。它需要做数学,但使用 SASS 和 Compass,您可以说出您想要的并得到结果!:D
你需要一个包装器:
<div class=iframe-container>
<iframe></iframe>
</div>
SASS + 指南针:
@import toolkit
.iframe-container
+intrinsic-ratio(16/9, 90%)
演示:http ://sassbin.com/gist/5983091/
如您所见,使用了很棒的Toolkit Compass 扩展。
使用 JQuery:
$('.iframe').height($('.iframe').width()*(9/16));
确保你有一个 js 文件