title: CSS img height with % not working
body: <p>i'd like to resize an image (and the slider containing the image).</p>
  
  <p>The following css code works fine:</p>
  
  <pre><code>.slick-slider .img-responsive{
    max-width:none;
    min-width:100%;
    width:100%;
    height:300px;
    object-fit: cover;
  }
  </code></pre>
  
  <p>The object is achieved: the image/slider fills the whole width of the screen and takes only 300px of height. object-fit:cover crops the image.</p>
  
  <p>But because i'd like to work responsive i want to change the height to a percentage value.</p>
  
  <p>But if i replace 300px with 30% nothing happens (-> meaning the image has the full height, nothing is cropped).</p>
  
  <p><a href="https://i.stack.imgur.com/9crXA.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/9crXA.jpg" alt="Relative value for height"></a></p>
  
  <p><a href="https://i.stack.imgur.com/2ifol.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/2ifol.jpg" alt="Absolute value for height"></a></p>