How to show two images each taking 50% of screen width using ionic?

I am trying to show two circular images in a row such that both images take 50% of the screen width. Also, I want to make sure that the aspect ratio of the images is maintained if they are scaled up or down. Here's the code that I have used:

<ion-view>
  <div class="row" >

    <div class="col col-50">
        <img src="img/Screen-Language/spanish.png" >
    </div>

    <div class="col col-50">
        <img src="img/Screen-Language/english.png" >
    </div>

   </div>
</ion-view>

This code leads to overlapping to two images and each image take more than 50% of screen width. How can I fix this issue. Many thanks in advance.