title: CSS: keep image aspect ratio as viewport width decreases
body: <p>At <a href="http://test.doig.com.au/vm-home.html" rel="nofollow noreferrer">this page</a>, there are 3 "doorway" graphics:</p>
  
  <p><a href="https://i.stack.imgur.com/MV0Pa.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/MV0Pa.jpg" alt="enter image description here"></a></p>
  
  <pre><code>&lt;div class="textwidget"&gt;    
      &lt;div class="one-third first"&gt;
          &lt;div id="doorway1" class="doorway"&gt;
              &lt;h3&gt;The Best Core Exercise Ever&lt;/h3&gt;
              &lt;div class="doorway-action"&gt;
                  &lt;a href="http://vmpersonal.com/product/core-strength-level-1/"&gt;&lt;img src="http://vmpersonal.com/wp-content/themes/vmpersonal/images/doorway-action.png" alt="Watch Video Now" title="Watch Video Now" /&gt; Watch Video Now&lt;/a&gt;
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
      &lt;div class="one-third"&gt;
          &lt;div id="doorway2" class="doorway"&gt;
              &lt;h3&gt;Core Strength Level 1 Program&lt;/h3&gt;
              &lt;div class="doorway-action"&gt;
                  &lt;a href="http://vmpersonal.com/product/core-strength-level-1/"&gt;&lt;img src="http://vmpersonal.com/wp-content/themes/vmpersonal/images/doorway-action.png" alt="Watch Video Now" title="Watch Video Now" /&gt; Watch Video Now&lt;/a&gt;
              &lt;/div&gt;
          &lt;/div&gt;        
      &lt;/div&gt;
      &lt;div class="one-third"&gt;
          &lt;div id="doorway3" class="doorway"&gt;
              &lt;h3&gt;Cardio Program&lt;/h3&gt;
              &lt;div class="doorway-action"&gt;
                  &lt;a href="http://vmpersonal.com/product/cardio-fitness-level-1/"&gt;&lt;img src="http://vmpersonal.com/wp-content/themes/vmpersonal/images/doorway-action.png" alt="Watch Video Now" title="Watch Video Now" /&gt; Watch Video Now&lt;/a&gt;
              &lt;/div&gt;
          &lt;/div&gt;        
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>I'd like to make the graphics and the divs that contain them responsive.</p>
  
  <p>They are contained in <code>div.one-third</code> containers.</p>
  
  <p>The images are 409px x 292px, meaning the height is <code>71.39364303%</code> of the width.</p>
  
  <p>I thought if I used CSS:</p>
  
  <pre><code>#doorway1 {background-image: url('images/doorway1.png'); height: 71.39364303%;}
  #doorway2 {background-image: url('images/doorway2.png'); height: 71.39364303%;}
  #doorway3 {background-image: url('images/doorway3.png'); height: 71.39364303%;}
  </code></pre>
  
  <p>they would scale down with the <code>div.one-third</code> as the viewport decreased in width, but they don't, the images are cut off.</p>
  
  <p>How can I keep the images aspect ration consistent as the viewport width decreases?</p>
  
  <p>Help appreciated.</p>
  
  <p><strong>Update</strong>: AJ Funk has helped me make the background images scale down, but how do I make the divs that contain them scale down proportionally too?</p>