twitter-bootstrap 引导程序自动调整屏幕大小的视频
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/24472016/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
bootstrap auto resize video for screen size
提问by Bren
I'm trying to decide between using Bootstrap and Foundation for front end work for a node.js express route. I was wondering if Bootstrap had any way to have an equivalent the Flex Video feature of Foundation (its an auto resizing based on screen size as far as I can tell)?
我正在尝试在使用 Bootstrap 和 Foundation 进行 node.js 快速路由的前端工作之间做出决定。我想知道 Bootstrap 是否有任何方法可以拥有与 Foundation 等效的 Flex Video 功能（据我所知，它是根据屏幕大小自动调整大小的）？
Edit: Regarding Peter Wooster's answer if there a solution that can be done easily without a framework why do people make such a big deal about Flex-Video then?
编辑：关于 Peter Wooster 的回答，如果有一个解决方案可以在没有框架的情况下轻松完成，那么为什么人们对 Flex-Video 如此重视呢？
采纳答案by Peter Wooster
You don't need a framework to do responsive video, so you can add it if it's not included.
您不需要框架来制作响应式视频，因此如果没有包含，您可以添加它。
The trick is to wrap the video in a div with width:100%; height:0; padding-bottom:66%or whatever aspect ratio you want the video to have. Set the width and height on the video to 100%. That div will scale properly and retain its aspect ratio and the video will fill it.
诀窍是将视频包装在一个 div 中，width:100%; height:0; padding-bottom:66%或者您希望视频具有的任何纵横比。将视频的宽度和高度设置为 100%。该 div 将正确缩放并保持其纵横比，视频将填充它。
Edit: this trick isn't new, just not well known, here's an article from 2009 describing it: http://alistapart.com/article/creating-intrinsic-ratios-for-video. Luckily the IE5-6 kludges are no longer needed.
编辑：这个技巧并不新鲜，只是不为人所知，这是 2009 年的一篇描述它的文章：http: //alistapart.com/article/creating-intrinsic-ratios-for-video。幸运的是，不再需要 IE5-6 kludges。
回答by cvrebert
Bootstrap has responsive embeds: http://getbootstrap.com/components/#responsive-embed
Bootstrap 具有响应式嵌入：http: //getbootstrap.com/components/#responsive-embed
Gratuitous example solely to avoid silly annoying SO bureaucrats from complaining about "link-only answer":
无缘无故的例子只是为了避免愚蠢的烦人的 SO 官僚抱怨“仅链接的答案”：
<!-- 16:9 aspect ratio -->
<div class="embed-responsive embed-responsive-16by9">
<iframe class="embed-responsive-item" src="…"></iframe>
</div>
