title: How to responsive image in ionic from different screen size?
body: <p>I am creating an ionic app, in that I need to add a four images in my home page in two row and each row has two images. The images size is 296*296.
  I have tried the below code,</p>
  
  <p><strong>index.html</strong></p>
  
  <pre><code>&lt;ion-nav-view class="container" &gt;
  &lt;/ion-nav-view&gt;
  </code></pre>
  
  <p><strong>Home.html</strong></p>
  
  <pre><code>&lt;ion-view view-title="HOME"&gt;
    &lt;ion-content&gt;
      &lt;div class="row" &gt;
        &lt;div class="col-md-6 " id="img1"&gt;
           &lt;img src="img/hard.png" class="img-responsive " id="img1" &gt; 
        &lt;/div&gt;
        &lt;div class="col-md-6" id="img1"&gt;
           &lt;img src="img/soft.png" class="img-responsive " id="img1"&gt; 
        &lt;/div&gt;
      &lt;/div&gt;
        &lt;div class="row" &gt;
        &lt;div class="col-md-6 " id="img1"&gt;
           &lt;img src="img/welcome.png" class="img-responsive " id="img1" &gt; 
        &lt;/div&gt;
        &lt;div class="col-md-6" id="img1"&gt;
           &lt;img src="img/title.png" class="img-responsive " id="img1"&gt; 
        &lt;/div&gt;
      &lt;/div&gt;
    &lt;/ion-content&gt;
   &lt;/ion-view&gt;
  </code></pre>
  
  <p><strong>CSS</strong></p>
  
  <pre><code>#img1{
      width: 100%;
  height: auto
  }
  </code></pre>