title: Adjust height of image to 100% width without altering aspect ratio
body: <p>I'm currently working on a project where we use a slider with images. This slider is displayed with width 100%, and currently we're adjusting the height to make the slider responsive, in case the user resizes the browser window or visits the website using their phone.</p>
  
  <p>However, the website is for an artist who obviously does not want the image to be altered in any way, especially not altering with the aspect ratio. So what we're looking into is having <code>height: auto</code> to adjust the image height correctly according to the <code>width: 100%</code>, without altering the image (aspect ratio) itself.</p>
  
  <p>This does not work like intended however, using the following code:</p>
  
  <pre><code>@media (min-width:1600px) {
      #header{
          height:auto;
          width: 100%;
          min-height: 630px;
          background-size: 100% auto;
      }
  
      #slidershadow {
          height: 630px;
      }
  }
  </code></pre>
  
  <p>We need to have some <code>min-height</code>, otherwise we cannot display the slider controls correctly. Here is a picture of our current situation (first image) and the expected behaviour (second picture).</p>
  
  <p><img src="https://i.stack.imgur.com/FZ3xW.png" alt="Adjust height of image to 100% width without altering aspect ratio"></p>
  
  <p>Is there a way to resize our slider responsive, but keeping the following in mind:</p>
  
  <ul>
  <li>The aspect ratio of the image cannot be altered;</li>
  <li>We cannot crop images too much (only slightly);</li>
  <li>There is a minimum height to keep in mind;</li>
  </ul>
  
  <p>If it helps, all images in the slider have the same size.</p>