Clever Geek Handbook

How do I show two images each taking up 50% of the screen width using ionic?

I am trying to display two circular images in a row so that both images take up 50% of the screen width. Also, I want to make sure that the aspect ratio of the images is maintained if they are scaled or scaled down. Here is the code I 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 causes two images to overlap and each image takes up more than 50% of the screen width. How can I fix this problem. Thank you very much in advance.

+3


source to share


2 answers


Please, try



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

    <div class="col col-50">
        <img src="img/Screen-Language/spanish.png" style="width:100%">
    </div>

    <div class="col col-50">
        <img src="img/Screen-Language/english.png" style="width:100%">
    </div>

   </div>
</ion-view>
+4


source


you can also do it like this (css way):



img{
    width: 45.7vw;
    height: 100px; //some custom height
    margin: 2px;
}
0


source






More articles:


All Articles