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
Deep arora
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
Ladislav Maxa
source
to share
you can also do it like this (css way):
img{
width: 45.7vw;
height: 100px; //some custom height
margin: 2px;
}
0
Niloo
source
to share