Ионные два изображения рядом друг с другом

Question

Я положил два images бок о бок на одной странице под номером header как col-50. Проблема в том, что я хочу, чтобы оба изображения были полностью заполнены шириной 50% без каких-либо дополнений вокруг любых ребер. Я не могу понять это с CSS

<div class="col col-50 row-no-padding"> 
    <img src="img/facebook.jpg" style="width:100%; display: inline-block"> 
    </div> 

    <div class="col col-50 row-no-padding"> 
    <img src="img/twitter.jpg" style="width:100%; display: inline-block"> 
    </div> 

выше работал в моем браузере (ионный служить), но не работает на моем устройстве.

Answer 1

проблема изображения считаются рядный, в результате чего любое белое пространство рассматривается как пространство, попробуйте следующее:

<!-- both images should be in-line to have it working --> 

<img style="width:50%; display: inline-block" src="the_image_source"/> 

<img style="width:50%; display: inline-block;" src="the_image_source/> 

вы можете также изолировать css, если вы хотите

img{ 
     style: inline-block; 
     width: 50%; 
} 

Answer 2

Вы могли бы просто использовать:

no-padding 

к Col DIV

<ion-row> 
    <ion-col col-6 no-padding></ion-col> 
    <ion-col col-6 no-padding></ion-col> 
</ion-row> 

См Ионная документация для Grid

Надеется, что это помогает.