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

HUX布斯

使用新的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 */}

  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;}