title: Changing Card height in Reactstrap
body: <p>I am working with Reactstrap and in order to make a certain Card responsive to the size of the window, I want to fix its aspect ratio with percentages, not pixels.</p>
  
  <p>For some reason, this works for width but NOT for height. 
  <a href="https://codepen.io/anon/pen/xpwOGL" rel="nofollow noreferrer">https://codepen.io/anon/pen/xpwOGL</a></p>
  
  <p>The first line is the problem. If I set height to a constant, say <code>height:"200px"</code>, it will make it <code>200px</code> just fine. And if I change the width %, it will change the width to match. But for some reason height % just doesn't do anything. </p>
  
  <pre><code>&lt;Card style={{width:"80%", height:"60%"}}&gt; 
     &lt;Row className="no-gutters" style={{position: "absolute"}}&gt;
        &lt;Col xs="auto"&gt;
          &lt;button&gt;
            Next image
          &lt;/button&gt;
        &lt;/Col&gt;
        &lt;Col xs="auto"&gt;
          &lt;button&gt;
            Previous image
          &lt;/button&gt;
        &lt;/Col&gt;
      &lt;/Row&gt;
   &lt;/Card&gt;
  </code></pre>
  
  <p>Is there a different way that I'm supposed to use to make this responsive?</p>