title: Calc() pixel height dynamically based on dynamic width and ratio with CSS
body: <p>Been trying what seems to be an uphill battle.</p>
  
  <p>I have an image, 768px x 411px. It must be fixed because it is part of a javascript scratch game. It can be resized though, but it must have fixed values.</p>
  
  <p>My idea is the set the width to 100vw, then calculate the aspect ratio of the image and then base don that ratio, calculate the height from the current image width value.</p>
  
  <p>I've been reading up a lot but no luck thusfar. Is this not possible with CSS alone? Here's part of my code:</p>
  
  <pre><code>        :root{
              --defaultWidth: 768px;
              --defaultHeight: 411px;
              --widthMain: calc(100% - 5px);                 
              --perspective: calc( var(--defaultHeight) / var(--defaultWidth) );
          }
          .scratchpad {
              width: var(--widthMain);
              height: calc( var(--widthMain) * var(--perspective) );
          /* also tried variations of this
              height: calc( calc(var(--widthMain) * var(--perspective)) ); */
          }
          .scratch-container {
              -webkit-touch-callout: none;
              -webkit-user-select: none;
              -khtml-user-select: none;
              -moz-user-select: none;
              -ms-user-select: none;
              user-select: none;
              width:100%;
          }
  </code></pre>
  
  <p>Thanks.</p>
  
  <p>EDIT:
  Can't say I'm proud but I hacked myself into a temp solution by mixing it up with PHP</p>
  
  <pre><code>        &lt;?php
      // Calling getimagesize() function 
      list($width, $height) = getimagesize("cover.png");
      $ratio   =  $height/$width;
      ?&gt;
  
      &lt;style type="text/css"&gt;
          :root{
              --defaultWidth: &lt;?=$width?&gt;px;
              --defaultHeight: &lt;?=$height?&gt;px;
              --widthMain: calc(100vw - 15px);                 
              --perspective: calc( var(--defaultHeight) / var(--defaultWidth) );
          }
          html {
              box-sizing: border-box;
          }
          *, *:before, *:after {
              box-sizing: inherit;
          }
          .scratchpad {
              width: var(--widthMain);
              height: calc((100vw - 15px) * &lt;?= $ratio; ?&gt; );
              border: solid 2px #fff;
              margin: 0 auto;
          }
  </code></pre>