title: Fit image to parent div's size
body: <p>I have made a div (div1), which is equal to the browser window size. Then I have made another div (div2) inside the parent div (div1). Then I have placed an image inside the second div (div2). My browser window size is 1360X638 and my image size is 1600*1200.</p>
  
  <p>I want the image to fit itself according to the parent div's (div1) size. So the image (which is larger than the window size) have to fit itself to the second div (div2), which is equal to window size), and this image will fit exactly to the div's size (so, there isn't any scrolling or cropping of image in the display).</p>
  
  <p>I have searched for some time. The solution I found is to set the maximum height and width to 100%. I did this.</p>
  
  <p>I wrote this part:</p>
  
  <pre><code>&lt;div style="max-width: 100%; max-height: 100%; background-color: red; margin-right: 0px; padding: 2 2 2 2; overflow:visible;"&gt;
      &lt;div style="max-height: 100%; max-width: 100%;"&gt;
          &lt;img style="max-width: 100%; max-height: 100%; overflow:visible;" src="1.jpg" /&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>The output is like this:</p>
  
  <p><img src="https://i.stack.imgur.com/zy9Qd.jpg" alt="Enter image description here"></p>
  
  <p>You can see there is a scroll in the right side. I don't want that there.</p>