Blend a full background over sliding curtain

HTML & CSS
73

640 x 340

https://jsfiddle.net/c3t5nq2a/

.curtain-ratio-keeper {
  position: relative;
  padding-top: 55.224%;

  /* overflow: hidden; */
}

Is there a math equation to figure out the right percentage?

To get it to 360