<div class="wrap">
  <div class="item"><span>3:2</span></div>
</div>
body {
  margin: 0;
  padding: 0;
}
.wrap {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100vw;
  height: 100vh;
  padding: 0;
  background: #eee;
}
.item {
  width: 300px;
  //unnecessary space
  max-width: calc( 100vh * ( 100 / 66 ));
  //necessary space
  max-width: calc( 70vh * ( 100 / 66 ) );
  margin: 0 15vw;
  position: relative;
  background: #333;
  span {
    color: #fff;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
  }
  &:before {
    content: "";
    display: block;
    //Either will work.
    padding-top: calc( 100% * ( 2 / 3 ) );
    padding-top: 66%;
  }
}
View Compiled

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.