title: Bootstrap Image fit to screen
body: <p>I tried to scale image to browser screen using bootstrap, just like <a href="http://www.northrupphotography.com/" rel="noreferrer">this</a> website. </p>
  
  <p>By setting</p>
  
  <pre><code>img {
      max-width: 100%;
      max-height: 100%;
  }
  </code></pre>
  
  <p>it does show full image, but shows scrolls as well.
  Scrolls are being countered through:</p>
  
  <pre><code>body {
       overflow-y: hidden;
       overflow-x: hidden;
  }
  </code></pre>
  
  <p>Now, the problem is, I am unable to show complete image on screen. It does crop some portion of image (in case image is bigger than browser window).</p>
  
  <p>Anyone to help me please?
  Thanks.</p>