title: How to make large size(large resolution) images fit to every screen size,How to avoid it going beyond the screen
body: <p>I'm making a few HTML pages specifically for iPad Air and iPad Mini. The pages will have few larges images, for example of the size of 1600x300. But as per the code which was written by me the images are too big to be on the screen, it goes beyond the screen while testing in Windows browsers. Code as shown below:</p>
  
  <pre class="lang-html prettyprint-override"><code>&lt;div class="wrapper"&gt;
      &lt;div class="image1"&gt;&lt;/div&gt;
      &lt;div class="image2"&gt;&lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <pre class="lang-css prettyprint-override"><code>.wrapper {
      width: 100%;
      height: 100%
  }
  .image1 {
      width: 1600px;
      height: 300px;
      top: 100px;
      left: 100px
  }
  .image2 {
      width: 1700px;
      height: 300px;
      top: 450px;
      left: 100px
  }
  </code></pre>
  
  <p>The width and height of div are set the same as width and height of the image. The images size were specifically designed for iPad, I can't change the size.</p>
  
  <p>If I give the actual resolution of iPad for <code>.wrapper</code> as shown below the images will get positioned correctly when I test I the browser setting the screen size to 1024x768 (logical resolution of iPad).</p>
  
  <pre class="lang-css prettyprint-override"><code>.wrapper {
      width: 2048px;
      height: 1536px
  }
  </code></pre>
  
  <p>I want the image to adapt to all screen as well as iPad by giving 100% width and height to wrapper class so that even in the portrait mode of iPad I can view it without any fluctuations. Please tell me how to achieve this.</p>
  
  <p>Thanks</p>