title: Crop image from the top
body: <p>It's pretty easy to crop an image from the bottom, left or right by setting the <code>overflow: hidden</code> property of the container of the image. </p>
  
  <pre><code>&lt;div class="img-container"&gt;
     &lt;img class="img" src="/img.jpg" /&gt;
  &lt;/div&gt;
  
  &lt;style&gt;
     .img-container {
         overflow: hidden;
         max-height: 700px;
     }
  
     .img {
          width: 100%;
          height: auto;
      }
  &lt;/style&gt;
  </code></pre>
  
  <p>Is there any way to crop the image from the top? If the window is being resized and the image cannot fit into the height of the container anymore, the image should be cropped from the top instead of from the bottom.</p>