html 屏幕宽高比,保持div的宽高比但在CSS中填充屏幕宽度和高度？

使用新的CSS视口单位 vw和vh(视口宽度/视口高度)

垂直和水平调整大小，您将看到元素将始终填充最大视口大小而不会破坏比例并且没有滚动条！

(纯粹)CSSdiv{

width: 100vw;

height: 56.25vw; /* height:width ratio = 9/16 = .5625  */

background: pink;

max-height: 100vh;

max-width: 177.78vh; /* 16/9 = 1.778 */

margin: auto;

position: absolute;

top:0;bottom:0; /* vertical center */

left:0;right:0; /* horizontal center */}* {

margin: 0;

padding: 0;}div {

width: 100vw;

height: 56.25vw;

/* 100/56.25 = 1.778 */

background: pink;

max-height: 100vh;

max-width: 177.78vh;

/* 16/9 = 1.778 */

margin: auto;

position: absolute;

top: 0;

bottom: 0;

/* vertical center */

left: 0;

right: 0;

/* horizontal center */}

如果要使用视口最大宽度和高度的90％：* {

margin: 0;

padding: 0;}div {

width: 90vw;

/* 90% of viewport vidth */

height: 50.625vw;

/* ratio = 9/16 * 90 = 50.625 */

background: pink;

max-height: 90vh;

max-width: 160vh;

/* 16/9 * 90 = 160 */

margin: auto;

position: absolute;

top: 0;

bottom: 0;

left: 0;

right: 0;}

此外，浏览器支持也很不错：IE9 +，FF，Chrome，Safari- caniuse