如何使用离子显示两个图像，每个图像占据屏幕宽度的50％？

Question

我试图连续显示两个圆形图像，使得两个图像占据屏幕宽度的50％。另外，我想确保图像的纵横比在按比例放大或缩小时保持不变。这是我使用过的代码：

<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>

此代码导致与两个图像重叠，每个图像占据屏幕宽度的50％以上。我该如何解决这个问题。非常感谢提前。

Answer 1

请试试这个

<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>

Answer 2

你也可以这样做（css方式）：

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