创建一个面积为16：9且高度为100％的div

Question

我发现许多例子的宽度为100％并且改变高度以使方面为16：9，但是我想让div填充高度和宽度以便改变，居中。< / p>

身高的例子： Maintain the aspect ratio of a div with CSS

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

Answer 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);

度过愉快的一天。