Update Image in various device

Ionic Framework ionic-v3
1

Hi, so I am using DevApp as emulator to test my app. The issue is when I tested my apps by ionic serve then it came out from browser and devApp which is in my mobile phone. But the picture I uploaded is not same as in both emulator. For example this is what come out from my browser:

browser
browser.png931×714 19.3 KB

But how I want it to be is like this: this is from my devApp in my mobile phone

devapp
devapp.jpeg607×1080 21.9 KB

Here is the code:

(html)

<ion-content class="card-background-page">

    <a href="https://www.facebook.com/pskt.terengganu"><ion-img src="../assets/imgs/media/fbook.jpg" ></ion-img></a>

    <a href="https://www.facebook.com/pskt.terengganu"><ion-img src="../assets/imgs/media/ig.jpg"></ion-img></a>

    <a href="https://www.facebook.com/pskt.terengganu"><ion-img src="../assets/imgs/media/ws.jpg"></ion-img></a>


</ion-content>

(scss)

page-contact {

    .card-background-page {

        ion-card {
            display: flex;
            flex-direction: column;
            width: 100% !important;
            margin: 0 !important;
        }

    .img {
        max-width: 100%;
        height: auto;
        -webkit-background-size: cover;
-moz-background-size: cover;
background-size: cover;
    }
      
      }

}

I am thinking that there is anything like update the image so its compactible and responsive to any kind of device.

2

I am thinking you didn’t pay attention to the bit in the docs which says:

Note: ion-img is only meant to be used inside of virtual-scroll