title: Is it possible to use CSS calc() in order to calculate an width/height ratio?
body: <p>This is the code which I currently have (it does not work yet):</p>
  <p>HTML:</p>
  <pre><code>&lt;div class=&quot;chi_display_header&quot; style=&quot;background-image:url('http://localhost/.../header-dummy-small.png');&quot;&gt;&lt;/div&gt;
  </code></pre>
  <p>CSS:</p>
  <pre><code>.chi_display_header {
      background-size:contain;
      width:100%;
      min-height:100px;
      height:calc(1vw * 270 / 1280px);
      max-height:270px;
      max-width:1280px;
      margin:0 auto;
  }
  </code></pre>
  <p>This is a centered responsive background image - the container should have a variable width / height and I do not want to use jQuery.</p>
  <p>Known properties:</p>
  <blockquote>
  <p>Ratio: 1280:270</p>
  <p>Minimum height: 100px</p>
  <p>Maximum height: 270px</p>
  <p>Maximum width: 1280px</p>
  </blockquote>
  <p>What I try to do is to calculate the container height of .chi_display_header magically with calc:</p>
  <blockquote>
  <p>height = calc( CURRENT_SCREEN_WIDTH * 270 / 1280);</p>
  </blockquote>
  <p>However my current approach</p>
  <pre><code>height:calc(1vw * 270 / 1280px);
  </code></pre>
  <p>does not work yet. Is there a CSS solution?</p>