title: CSS crop image to fit screen width while keeping the original height of the image
body: <p>I'm trying to display an image (6000px width, 300px height) at the end of the <code>main-content</code> like background image. The image should fit the width of the screen, but keep the origin height.</p>
  
  <p>In other words somehow always crop the image at the center while the width of the x-crop is the screen width size and height crop is the origin height of the image.</p>
  
  <p>I have made the image with 6000px width so that I can fit all the screens.</p>
  
  <p>the code below does not work as expected its obvious, it just display the original img while scaling the height to keep the aspect ratio relative to the screen width.</p>
  
  <p>newnewwaves.svg : <a href="http://svgshare.com/i/3DT.svg" rel="nofollow noreferrer">http://svgshare.com/i/3DT.svg</a></p>
  
  <p>how I want to be displayed: <a href="https://ibb.co/e80Ddw" rel="nofollow noreferrer">https://ibb.co/e80Ddw</a></p>
  
  <p>HTML:</p>
  
  <pre><code>&lt;div class="main-content"&gt;
         ...content
          &lt;div id="header-waves"&gt;
              &lt;img src="/assets/images/newnewwaves.svg" alt=""&gt;
          &lt;/div&gt;
   &lt;/div&gt;
  </code></pre>
  
  <p>CSS:</p>
  
  <pre><code>.main-content {
     position: relative;
  }
  #header-waves {
     position: absolute;
     left: 0;
     bottom: 0;
  }
  #header-waves img {
    width: 100%;
    height: auto;
    display: block;
  }
  </code></pre>