创建一个纵横比为 16:9 且高度为 100% 的 div答案

【问题标题】：Create a div having its aspect 16:9 while having height 100%创建一个纵横比为 16:9 且高度为 100% 的 div
【发布时间】：2015-12-14 17:00:08
【问题描述】：

我发现了许多示例，其中宽度为 100% 并更改高度以使纵横比为 16:9，但我希望 div 填充高度和要更改的宽度，居中。

高度示例： Maintain the aspect ratio of a div with CSS

它只会创建一个 16:9 css 的方面，那将是最好的。

【问题讨论】：

你需要在 div 中放什么？什么类型的内容？
stackoverflow.com/questions/1495407/…的可能重复
This 是更好的副本，但它没有任何答案。
@enguerranws 内容随着单个图像、文本或混合而变化，使其看起来像一个屏幕。
据我所知，这可以使用 JS 而不是 CSS 来完成。还在看。问题是：您尝试放置一个具有窗口高度的 16/9 div。那么如果窗口比例小于16/9，你的div左右溢出？

标签： javascript jquery html css

【解决方案1】：

用 jquery 做的，这是我的解决方案。

HTML

<div id="aspect" style="margin:auto; width:100%; height:100%;"></div>

JQUERY

function setAspect(aspect) {
    var div = $("#aspect");
    div.css("height","100%").css("width","100%");
    var height = div.outerHeight(false);
    var width = div.outerWidth(false);
    var fullaspect =  width / height;
    if (aspect > fullaspect) {
        //adjust height
        div.css("height", width / aspect);
    } else {
        //adjust width
        div.css("width", height * aspect);
    }
}

setAspect(16/9);
//setAspect(4/3);
//setAspect(1);

祝你有美好的一天。

【讨论】：