Hey guys I have dynamic images in my cards but all the images are different sizes my card is set to a height of 280px with a width at 100%, the imges in the cards are over riding the card container so I set the image height but now all the images are warped can someone help with this styling issue my code is below
<ion-card color="light">
<img [src]="post.imageUrl">
<ion-chip style="font-size: 12px;" color="danger">
<ion-label color="light">Steve</ion-label>
</ion-chip>
<ion-item color="light" class="myitem" lines="none">
<h5>{{ post.title }}</h5>
<ion-icon class="placeIcon" slot="end" color="primary" name="pin"></ion-icon>
<p style="font-size: 12px;" slot="end">{{{{ post.place}}}}</p>
</ion-item>
<span class="myspan" style="font-size: 11px;">6 min ago</span>
</ion-card>
ion-card {
display: inline-block;
width: 100%;
margin: 10px auto ;
}
img{
height:280px;
width:100%;
}