title: How to crop the image so that it fits 50% of the screen?
body: <p>I need the image to fit the 50% of the <strong><em>screen height of the device</em></strong> and <strong><em>not 50% of the current screen size</em></strong> (the user might have minimized the screen). Also, when the user resizes the screen, I don't want the image to automatically fit the screen once initially it is rendered.</p>
  
  <p>The image is very large and I am looking to <strong>crop</strong> it, and <strong>not resize</strong> it. Here is what I done so far:</p>
  
  <p>home.html:</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html lang="en-us"&gt;
  &lt;head&gt;
  &lt;link rel="stylesheet" type="text/css" href="home.css"&gt;
  &lt;/head&gt;
  &lt;body&gt;      
  &lt;img class="image" src="myimage.jpg" alt=""&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>home.css:</p>
  
  <pre><code>html, body {
  margin:0;
  border:0;
  padding:0;
  }
  
  img.image {
  width:100%;
  }
  </code></pre>
  
  <p>I don't want to use anything apart from HTML, CSS and JavaScript. It would be great if somebody help me understand how should this be done in CSS. Thanks!</p>