How to responsive image in ionic from different screen size?

Question

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,

index.html

<ion-nav-view class="container" >
</ion-nav-view>

Home.html

<ion-view view-title="HOME">
  <ion-content>
    <div class="row" >
      <div class="col-md-6 " id="img1">
         <img src="img/hard.png" class="img-responsive " id="img1" > 
      </div>
      <div class="col-md-6" id="img1">
         <img src="img/soft.png" class="img-responsive " id="img1"> 
      </div>
    </div>
      <div class="row" >
      <div class="col-md-6 " id="img1">
         <img src="img/welcome.png" class="img-responsive " id="img1" > 
      </div>
      <div class="col-md-6" id="img1">
         <img src="img/title.png" class="img-responsive " id="img1"> 
      </div>
    </div>
  </ion-content>
 </ion-view>

CSS

#img1{
    width: 100%;
height: auto
}

Answer 1

Your ids for div and img are same ie img1. Change the id and then try. And make width and height important may be some other css overwrites it. Tell me if this works or not.

 #img2{ width: 100% !important; height: auto !important; }

 <div class="col-md-6 " id="img1"> <img src="img/hard.png" class="img-responsive " id="img2" > </div>

Answer 2

I also got this issue. This code might help to you

HTML

    <div class="list card new-feeds wall-post">
    <div class="row">
        <div class="col">
            <div class="item item-image img4">
                <img src="img/hard.png">
            </div>
            <div class="item item-image img4">
                <img src="img/soft.png">
            </div>
            <div class="item item-image img4">
                <img src="img/welcome.png">
            </div>
            <div class="item item-image img4">
                <img src="img/title.png">
            </div>
        </div>
    </div>
</div>

css

.wall-post .img4 {
    width: 50%;
    float: left;
    height: 120px;
}
.img4 > img {
    height: 100%;
    width: 100%;
    object-fit: cover;
}