title: Javascript Show full image only on click otherwise fit screen
body: <p>I am trying to display single image on a web page so that :</p>
  
  <p>If the image is smaller than screen of the user. Full Image is shown</p>
  
  <p>Otherwise if the image is larger than user's screen then it should fit screen and <strong>once image is clicked only then full size is shown .</strong> </p>
  
  <p>Here is my html</p>
  
  <pre><code>&lt;html&gt;
  &lt;body&gt;
  &lt;div class="img"&gt;
  &lt;img src="imagepathhere.jpg" /&gt;
  &lt;/div&gt;
  
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>Here is the css that I have tried but I guess it is not possible by just only using css:</p>
  
  <pre><code>    &lt;style&gt;
      html,body{
      min-width:100%;
      margin:0px;
      padding:0px;
      }
  
      .img {
      padding:0px;
      width:auto;
      text-align:center;
      margin:auto;
      }
      .img img {
      max-width:100%;
      }
  &lt;/style&gt;
  </code></pre>
  
  <p>What would be best way to do it?</p>
  
  <p>Ahmar.</p>